React点击Link后页面不自动加载 需手动刷新该如何解决

你当前的问题核心是嵌套了多层<BrowserRouter>：

• 你在index.js里已经给整个App套了一层<BrowserRouter>作为全局路由根节点
• 又在MainNavigation导航组件里额外套了一层独立的<BrowserRouter>
  两层路由上下文互相独立，导航栏的Link触发的是内层路由的跳转，外层App里的Routes监听不到内层的路由变化，所以页面不会自动渲染匹配的组件，只有刷新时全局走外层路由才能正常加载。

1. 修改MainNavigation组件，删除多余的<BrowserRouter>包裹，修改后代码如下：

function MainNavigation() {
  return (
    <header>
      <div>React Meets Up</div>
      <nav>
        <ul>
          <li>
            <Link to="/">AllMeetUp</Link>
          </li>
          <li>
            <Link to="/newmeetup">New MeetUp</Link>
          </li>
          <li>
            <Link to="/favorites">Favourite Page</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}
export default MainNavigation;

2. 可选优化：把App.js里没用的BrowserRouter导入语句删掉，避免后续误写嵌套：
   将原来的import { BrowserRouter, Route } from "react-router-dom";修改为import { Route } from "react-router-dom";即可。

修改完成后重新启动项目，Link点击就能正常跳转不需要手动刷新了。

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