React Router V5 URL更新但视图不刷新问题求助

哦，我一眼就发现问题所在啦！你当前的代码里犯了一个React Router的常见错误——同时存在多个BrowserRouter（也就是你代码里的Router）实例。

问题根源 #

Navbar.js里你用Router包裹了导航栏的Link，而App.js里又用另一个Router包裹了路由规则（Switch和Route）。这会创建两个完全独立的路由上下文：Navbar里的Link只会更新自己上下文里的路由状态，但App里的Route属于另一个上下文，完全感知不到这个变化，所以就出现了URL变了但页面不刷新的情况。

修复步骤 #

只需要保留一个顶层的Router实例，让所有路由相关组件（Link、Route、Switch）都共享同一个上下文即可。

1. 修改Navbar.js，移除内部的Router

把Navbar里的Router删掉，只保留Link即可，因为它会继承App中顶层Router的上下文：

import React from "react";
import logo from "../Assets/imgs/Logo/WHITELOGOkatman 1.png";
import { Link } from "react-router-dom";

class Navbar extends React.Component {
  render() {
    return (
      <div className="header">
        <img className="logo" src={logo} alt="logo" />
        <nav>
          <ul className="nav_links">
            <Link to="/">
              <li>Home</li>
            </Link>
            <Link to="/process">
              <li>Process</li>
            </Link>
            <Link to="/career">
              <li>Career</li>
            </Link>
            <Link to="/about">
              <li>About</li>
            </Link>
          </ul>
        </nav>
      </div>
    );
  }
}
export default Navbar;

2. 修改App.js，让顶层Router包裹整个应用

把Router移到最外层，包裹Navbar、路由内容和Footer，确保所有需要路由的部分都在同一个上下文里：

import React from "react";
import "./App.css";
import "./Components/Styles/style.css";
import "bootstrap/dist/css/bootstrap.css";
import Navbar from "./Components/Navbar";
import About from "./Components/About";
import Home from "./Components/Home";
import Career from "./Components/Career";
import Footer from "./Components/Footer";
import notFoundPage from "./Components/404";
// 记得导入你的Process组件哦，原来的代码里没加这个路由
import Process from "./Components/Process";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/career" component={Career} />
          <Route path="/process" component={Process} />
          {/* 把404路由放在最后，自动匹配所有未命中的路径 */}
          <Route component={notFoundPage} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}
export default App;

额外注意事项 #

• 整个应用只能有一个Router实例，这是React Router的核心规则之一，多个实例会导致上下文隔离，路由状态无法同步。
• 你原来的App.js里没有配置/process的路由，记得补充导入对应的Process组件并添加路由规则，不然点击导航栏的Process会跳转到404页面。
• 404路由可以不用指定path，放在Switch的最后，就能自动匹配所有未被前面路由命中的路径。

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