React Router路由跳转异常求助：使用Link组件无法跳转至/login路由

嘿，我一眼就揪出问题啦！你的代码里犯了一个React Router新手常踩的坑——嵌套了多个<Router>组件。

问题根源 #

你已经在App组件里声明了顶层的<Router>来管理整个应用的路由，但在Menu组件外面又额外套了一层<Router>。React Router的路由上下文是由最外层的Router提供的，嵌套多个Router会导致：

• 点击Link时，它会使用内层Router的上下文，而这个上下文和负责路由匹配的顶层Router完全不关联
• 所以点击后没法触发路由跳转，但手动输入地址时，浏览器直接请求会触发顶层Router的匹配逻辑，因此能正常渲染页面

解决方案 #

只需要保留App组件里的唯一顶层Router，把Menu组件外面的<Router>删掉就好！因为Link只要处于Router的上下文范围内，就能正常工作，完全不需要额外嵌套。

修改后的Menu组件代码：

<Menu mode="horizontal" defaultSelectedKeys={["Home"]} style={{ position: "fixed", zIndex: 1, width: "100%", top: "0" }}>
  <Menu.Item key="Home" icon={<HomeOutlined />}>
    <Link to="/" onClick={() => { props.setSearchValue(""); props.setCountry("") }}>Home</Link>
  </Menu.Item>
  <Menu.Item key="Login">
    <Link to="/login">Login</Link>
  </Menu.Item>
</Menu>

验证效果 #

修改后再点击Menu里的Login Link，就能正常跳转到/login路由啦！手动输入地址和刷新页面的正常表现也会保持不变。

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