React Router Dom路由跳转后组件不渲染的配置方案咨询

这个问题我之前在项目里也碰到过，不用forceRefresh就能解决，大概率是这几个常见配置问题导致的，咱们一个个排查：

1. 确保使用React Router提供的History上下文，不要自己创建独立实例 #

你代码里用了<BrowserRouter>，它内部已经创建了自己的history实例并通过上下文传递。如果这时候你自己调用createHistory()创建独立的history，然后用它来push，就会出现URL变了但组件没感知的情况——因为两个history实例完全没关系。

正确做法：在组件里用React Router提供的钩子获取history：

import { useHistory } from 'react-router-dom';

function YourComponent() {
  const history = useHistory();
  
  const handleNavigate = () => {
    history.push('/packages');
  };
  
  return <button onClick={handleNavigate}>Go to Packages</button>;
}

如果你确实需要自定义history（比如需要监听路由变化做全局处理），那不要用<BrowserRouter>，改用基础的<Router>并传入你的history实例：

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import store from './store';
import App from './App';

const history = createBrowserHistory();

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

2. 检查路由配置是否正确 #

不同版本的React Router写法差异很大，别搞错了：

React Router v5写法 #

必须用<Switch>包裹路由，确保只会匹配第一个符合条件的路由：

import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/packages" component={PackagesComponent} />
        {/* 其他路由 */}
      </Switch>
    </div>
  );
}

React Router v6写法 #

要用<Routes>替代<Switch>，并且路由的组件要放在element属性里：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/packages" element={<PackagesComponent />} />
        {/* 其他路由 */}
      </Routes>
    </div>
  );
}

3. 处理Redux（或其他状态管理）导致的组件不更新 #

如果你的PackagesComponent是用Redux的connect包裹的容器组件，可能因为没有监听路由变化导致不渲染。这时候需要：

React Router v5方案 #

用withRouter高阶组件包裹，让组件能感知路由变化：

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

class PackagesComponent extends React.Component {
  // 组件逻辑
}

// 先withRouter再connect
export default withRouter(connect(mapStateToProps)(PackagesComponent));

React Router v6方案 #

v6里移除了withRouter，改用useLocation钩子：

import { useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';

function PackagesComponent() {
  // 获取location，它变化时组件会重新渲染
  const location = useLocation();
  const yourState = useSelector(state => state.yourState);
  
  return <div>...</div>;
}

4. 确保<BrowserRouter>/<Router>在应用最外层 #

不要把路由组件嵌套在某个子组件里，一定要放在整个应用的最顶层，比如index.jsx里：

// 正确写法
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

如果嵌套在App内部，会导致路由上下文被覆盖，变化无法传递到子组件。

先按上面的步骤排查，基本就能解决问题了。

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