react-router-dom调用history.push改URL后组件不渲染问题求助

你在App组件内部声明了createBrowserHistory()实例，每次App组件重渲染都会生成全新的history对象，Router组件绑定的history实例被替换后，旧实例触发的路由变更无法被新的Router识别，就会出现URL变化但对应组件不渲染的问题，刷新页面相当于重新初始化实例所以恢复正常。

• 第一步：把history实例的声明移到App组件外部，保证全局仅初始化一次
  调整后的App.js示例：

import React ,{ useState, useEffect } from "react";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";
import JsonData from "./data/data.json";
import axios from "axios";

// 移到组件外部，仅初始化一次，保证是单例
const hist = createBrowserHistory();

const App = () => {
  const [landingPageData, setLandingPageData] = useState({});
  useEffect(() => {
    setLandingPageData(JsonData);
  }, []);

  const { user: currentUser } = useSelector(state => state.auth);

  return (
    <Router history={hist}>
      {currentUser ? (
        <div>
          <Layout>
            <Switch>
              <Route path="/home" render={() => <Header data={landingPageData.Header} />} />
              <Route path="/destinations" render={() => <Destinations data={landingPageData.Destinations} />} />
            </Switch>
          </Layout>
        </div>
      ) : (
        <div>
          <Layout >
            <Switch>
              <Route path="/register-page" component={Register} />
              <Route path="/login" component={Login} />
            </Switch>
          </Layout>
        </div>
      )}
    </Router>
  );
};

// 无需用withRouter包裹App，withRouter仅对Router内部的子组件生效，App是Router的父组件，包裹属于无效操作
export default App;

• 第二步：如果其他业务组件也需要调用history做跳转，可以把history单独抽成公共文件导出，保证所有场景用的是同一个实例：

// src/utils/history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();

之后App.js引入该history传给Router，其他组件引入该history调用push方法即可。

内容的提问来源于stack exchange，提问作者tharnos_nos