使用react-router-dom的Link与Switch时为何需刷新才能显示对应页面

你遇到的「地址栏路径正常更新、但视图不切换、手动刷新才生效」问题，核心成因是没有遵守react-router-dom的组件层级规则：
react-router的路由匹配、Link跳转能力，完全依赖同一个Router组件提供的全局history上下文。所有Route、Switch、Link组件，必须被同一个最顶层的Router组件包裹，才能共享同一个history实例做状态同步。
你现在的实现里，把Link嵌套在了Home组件render方法内部的独立Router组件下，而Switch路由规则配置在这个独立Router的外部。这就导致两个完全独立的history实例：

• 点击Link时，只会更新Home组件内部那个Router对应的history栈，联动修改浏览器地址栏路径
• 但包裹Switch的路由匹配逻辑，监听的是另一个独立的history实例，根本感知不到刚才的路径变化，自然不会重新匹配路由规则、切换视图
• 只有手动刷新页面时，Switch重新初始化、读取浏览器地址栏的当前路径做匹配，才会渲染对应路径的页面。

两个控制台警告都是当前错误实现带来的伴生问题，和路由异常直接相关：

1. Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
   这个警告本质是你在Home组件的render方法中（本应是纯输出组件结构的无副作用执行流程），嵌入了会触发状态更新的逻辑（比如嵌套独立Router、在render中调用setState），打乱了React的状态更新时序。
2. Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.
   这个警告是因为多嵌套的独立Router组件卸载时，内部绑定的history事件监听、状态更新逻辑没有被正确清理，导致组件已经卸载后，还在尝试触发不存在的组件状态更新，属于典型的内存泄漏。

• 移除所有子组件render方法内部嵌套的独立Router组件
• 在应用最顶层（入口文件渲染根组件的位置）挂载唯一一个全局的BrowserRouter组件，将整个应用树（包括所有Switch、Route、Link、页面组件）都放在这个全局Router的包裹范围内
  正确的基础结构示例：

  // src/index.js 入口文件示例
  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
  
  const root = ReactDOM.createRoot(document.getElementById('root'))
  root.render(
    // 全局唯一的Router放在最顶层，所有内部组件都共享这个Router的history上下文
    <BrowserRouter>
      {/* 全局导航的Link可以直接放在任意层级，不需要再嵌套Router */}
      <div className="Page">
        <Link to="/MyFiles" className="Element">My files</Link>
      </div>
      <Switch>
        <Route exact path="/" render={(props) => <ConnectedHome user={currentUser} onLogout={logout} />} />
        <Route path="/MyFiles" render={(props) => <MyFiles user={currentUser} onLogout={logout} />} />
      </Switch>
    </BrowserRouter>
  )
  

• 修复时序和内存泄漏问题：
  • 保持所有组件render方法的纯函数特性，不在render流程中调用setState、触发全局状态变更
  • 检查所有异步逻辑（接口请求、定时器、全局事件订阅），在组件的componentWillUnmount钩子里取消订阅、清空定时器、中断未完成请求，避免组件卸载后触发无效的状态更新

如果暂时无法完成结构重构，可以通过强制页面刷新做临时规避：在全局组件中监听浏览器路径变化，对比当前渲染对应的路径和地址栏路径的差值，不一致时调用window.location.reload()触发整页加载。但这个方案会完全丢失单页应用的无刷新跳转体验，每次路由跳转都会触发整页资源加载，仅适合短期应急，不建议长期使用。

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