如何使用 React Router 将哈希添加到 url 而不重新渲染？

Question

我想在路线内打开一个 popin，并且想在 url 中添加一个哈希值。

例如 onClick 之前https://www.example.com/homeonClick 之后https://www.example.com/home#send-me-an-email

好吧，它可以工作，但是React Router 会重新渲染整个路由。

我在使用 React Router 时做错了什么吗？让我们看看下面我的代码（我简化了事情）

index.jsx我和大家一样使用 BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';

import App from './App';

const render = Component => {
  ReactDOM.render(
     <Router>
       <Component />
     </Router>,
    document.getElementById('root')
  );
};

render(App);

App.jsx我正在使用 withRouter 因为我需要其他地方的历史记录和位置

import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './views/Home';


const App = ({ ...props }) => {
  return (
    <Header />
      <section>
        <Switch>
          <Route exact path={"/"} component={() => <Home {...props} />} />
          <Route path={"/home"} component={() => <Home {...props} />} />
        </Switch>
      </section>
    <Footer />
  );
};

export default withRouter(App);

Home.jsx不幸的是，当我这样做时，this.props.history.push({ hash: 'send-me-an-email' })它会重新渲染路由组件 Home，不好

...
render() {
  <div>
    <button onClick={() => this.props.history.push({ hash: 'send-me-an-email' })}>
      Send me and email
    </button>
    <Popin 
      isOpened={this.state.isPopinOpened} 
      handleClose={() => this.props.history.push({ hash: '' })} />
  </div>
}
...

如何不仅仅因为我向相同的 url 添加了哈希而进行重新渲染？干杯。

Answer 1

只需依赖普通 JS：

window.history.pushState("object or string", "Title", "/home#send-me-an-email");

这将添加哈希/路由，而无需渲染或重新加载任何内容。