React Router问题：BrowserRouter路由内容需手动刷新才更新

你的问题核心是重复创建了BrowserRouter实例，导致路由上下文冲突：

• Layout组件已经用<BrowserRouter>包裹了整个应用，提供了顶层的路由上下文
• 但Routes组件里又再次渲染了<BrowserRouter as Router>，这会生成一个独立的内层路由上下文

外层导航触发的URL变化，内层的Router实例无法感知，所以路由对应的组件不会自动更新，必须刷新页面让内层Router重新读取URL才能渲染正确内容。HashRouter能临时生效，是因为它基于URL哈希部分做路由，哈希变化能被内层实例捕获，但这只是治标不治本的办法。

修复步骤 #

1. 移除Routes组件中的重复Router包裹
   所有路由相关组件只需要共享Layout提供的顶层BrowserRouter上下文即可，不需要在Routes里再套一层Router。

2. 清理Route组件的冗余写法
   你在部分Route中同时使用了component属性和子元素（比如<Route path="/" component={Home} exact><Home /></Route>），这会导致组件被重复渲染，React Router 5中只需要选一种方式即可。

修改后的代码 #

Routes.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "../Pages/Home/Home";
import Authors from "../Pages/Authors/Authors";
import Magazine from "../Pages/Magazine/Magazine";
import Podcast from "../Pages/Podcast/Podcast";

const Routes = () => {
  return (
    <Switch>
      <Route path="/" component={Home} exact />
      <Route path="/magazine" component={Magazine} exact />
      <Route path="/authors" exact component={Authors} />
      <Route path="/podcast" exact component={Podcast} />
    </Switch>
  );
};

export default Routes;

Layout.jsx

import React from "react";
import { BrowserRouter } from "react-router-dom";
import Routes from "../../Routes/Routes";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import "../../index.css";

const Layout = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes />
      <Footer />
    </BrowserRouter>
  );
};

export default Layout;

这样修改后，导航时顶层BrowserRouter会感知URL变化，通过上下文传递给Switch和Route，路由组件就能自动更新了。

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