React独立组件中Link点击后URL变更但页面不刷新问题求助

你遇到的问题根源是重复嵌套了<Router>组件！

看你的代码结构：App.js已经在最外层用<Router>包裹了整个应用的路由逻辑，但Header.js里又额外加了一层<Router>。React Router的工作机制是，Link组件会和它最近的上层<Router>建立关联——当你点击Header里的Link时，只有Header内部的Router会响应地址变化，但负责渲染对应页面组件的<Switch>是在App.js的外层Router下，这两个Router的上下文完全独立，所以外层的Switch根本感知不到地址变化，自然不会切换页面。

修复步骤 #

只需要把Header.js里的<Router>移除即可，子组件中的Link会自动继承顶层Router的上下文：

修改后的Header.js代码：

import { Link } from "react-router-dom";
const Header = () => {
  return(
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/url-list">URL Lists</Link>
          </li>
        </ul>
      </nav>
    </div>
  )
}
export default Header;

为什么这样有效？ #

React Router的核心组件（Link、Route、Switch等）必须在同一个<Router>的上下文环境中协作。顶层的<Router>已经为整个应用提供了路由上下文，所有子组件里的路由相关组件都能共享这个上下文，完全不需要再单独嵌套Router。

现在再点击"URL Lists"链接，地址栏变化的同时，App.js里的Switch会立刻匹配到对应的路由并渲染UrlList组件，页面就能正常更新了。

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