React Router的Link标签仅变更URL未渲染对应页面如何解决？

该异常和本地启动的json-server mock服务无关，核心是React Router的上下文未正确覆盖Link组件：

• 原生a标签触发浏览器原生跳转逻辑，会整页刷新重新加载应用资源，不受前端路由配置影响，因此跳转后可正常展示页面内容。
• react-router-dom提供的Link属于客户端路由跳转组件，点击后仅会修改地址栏URL，不会触发整页刷新，需要依赖外层包裹的Router组件（BrowserRouter/HashRouter）监听URL变化，匹配渲染对应路由的页面内容。若Link组件和负责渲染页面的Routes组件未被同一个Router组件包裹，就会出现地址变更但页面内容不更新的现象。

按以下顺序排查即可解决问题：

• 校验根组件嵌套层级：确保导航栏Navbar、路由配置项Routes/Route等所有路由相关组件，全部放置在同一个Router组件的作用域内。
  错误层级示例：

  // 入口文件错误写法
  root.render(
    <>
      <Navbar />
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </>
  )
  

  正确层级示例：

  // 入口文件正确写法
  root.render(
    <BrowserRouter>
      <Navbar />
      <App />
    </BrowserRouter>
  )
  

• 校验Link引入来源：确认Link从项目安装的react-router-dom包中引入，不存在导错组件、混装多个版本react-router-dom的问题。如果存在依赖版本混乱的情况，删除node_modules文件夹和依赖锁文件后重新执行npm install重装依赖即可。
• 校验路由匹配规则：确认Home、New Blog对应的路由路径，和Link组件to属性填写的路径完全匹配，且所有Route组件都包裹在Routes组件内部。

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