React路由问题：History.push更新URL但不加载组件

问题描述 #

我想实现点击按钮跳转到roompage路由的功能，目前URL能正常更新，但页面组件未渲染。

Home组件代码 #

import React from "react";
import { useHistory } from "react-router-dom";

function Home() {
    let history = useHistory();
    
    const joinroompage = () => {
        history.push('/joinroom');
    }
    
    const joinroompageashost = () => {
        history.push('/joinroom?host=true');
    }

  return (
      <div className="">
        <button onClick={()=>{joinroompage()}} className="">
            Join a meeting 
        </button>
        <button onClick={()=>{joinroompageashost()}} className="">
            Host a meeting
        </button>
      </div>
  );
}

App.jsx代码 #

import React from 'react';
import Home from './components/Home';
import Roompage from './components/roompage';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
import { createBrowserHistory } from "history";

const appHistory = createBrowserHistory();

function App() {
  return (
    <div className="App">
     <Router history={appHistory}>
      <Switch>
        <Route path='/home'>
          <Home/>
        </Route>
        <Route path='/joinroom'>
          <Roompage />
        </Route>
      </Switch>
     </Router>
    </div>
  );
}

使用版本 #

• react-router-dom @5.2.0
• react @18.2.0

解决方案 #

1. 移除自定义history实例 #

react-router-dom v5的BrowserRouter已经内置了history对象，手动传入自定义history会导致组件内useHistory获取的实例与Router使用的实例不一致，引发路由状态不同步。直接删除createBrowserHistory相关代码：

修改后的App.jsx：

import React from 'react';
import Home from './components/Home';
import Roompage from './components/roompage';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

function App() {
  return (
    <div className="App">
     <Router>
      <Switch>
        <Route path='/home' exact>
          <Home/>
        </Route>
        <Route path='/joinroom' exact>
          <Roompage />
        </Route>
      </Switch>
     </Router>
    </div>
  );
}

2. 简化按钮点击事件写法 #

无需在onClick中嵌套箭头函数，直接传递函数引用即可：

修改后的Home组件：

import React from "react";
import { useHistory } from "react-router-dom";

function Home() {
    let history = useHistory();
    
    const joinroompage = () => {
        history.push('/joinroom');
    }
    
    const joinroompageashost = () => {
        history.push('/joinroom?host=true');
    }

  return (
      <div className="">
        <button onClick={joinroompage} className="">
            Join a meeting 
        </button>
        <button onClick={joinroompageashost} className="">
            Host a meeting
        </button>
      </div>
  );
}

3. 可选：给Route添加exact属性 #

Switch组件会匹配第一个符合path规则的路由，添加exact属性可以避免模糊匹配导致的路由错误，确保只有路径完全匹配时才渲染对应组件。

问题原因 #

react-router-dom v5中，BrowserRouter内部维护了独立的history状态池，手动传入自定义history实例后，组件内useHistory获取的实例与Router使用的实例不属于同一状态池，导致路由跳转时URL更新但组件无法感知状态变化，最终不渲染。

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