react-router-dom v5切换URL后对应组件不渲染，仅刷新后显示如何解决

你遇到的路由跳转后组件不渲染、仅刷新才生效的问题，核心是Login和Signup组件内部重复嵌套了<Router>组件。
react-router v5版本要求全局仅保留最顶层的一个BrowserRouter实例即可，子组件内额外声明的Router会创建独立的路由上下文，和外层路由上下文完全隔离。你点击NavBar的Link触发的是外层路由的URL变更，但子组件内的嵌套Router会拦截路由状态更新，导致外层的Switch无法感知到路由变化，不会触发对应组件重渲染；只有刷新页面时全局重新初始化顶层Router，才能正确匹配路径渲染对应组件。

• 删除Login组件内部的<Router>包裹标签，仅保留内部业务代码和Link组件即可，修改后代码示例：

// 修正后的Login组件
<>
  <Link to='/signup'>Sign up here</Link>
</>

• 删除Signup组件内部的<Router>包裹标签，同理仅保留内部内容即可，修改后代码示例：

// 修正后的Signup组件
<>
  <Link to='/login'>here</Link>
</>

• 回退之前尝试的无效修改：恢复从react-router-dom导入BrowserRouter、Route、Switch等组件，移除对路由组件的withRouter额外包裹即可。

如果修复后仍存在问题，可以全局排查是否有其他业务组件也意外嵌套了Router实例，确保整个应用仅存在一个最顶层的Router实例。

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