React路由导航追加URL而非重置跳转问题求助

嘿，我刚看完你的问题，这其实是React Router里相对路径和绝对路径的常见小坑！

问题根源 #

你导航栏里的Link用的是相对路径（比如to="people"），当你当前处于/addPersonToHouse/8这样的多级路径时，React Router会默认把相对路径拼在当前路径的最后层级后面，所以就出现了/addPersonToHouse/people这种不符合预期的URL。

解决方案 #

把所有导航栏里的Link的to属性改成绝对路径——也就是在路径前面加上/，让它们始终相对于网站根路径跳转。

修改后的导航代码如下：

render() {
  return (
    <Navbar bg="dark" variant="dark">
      <Link to="/" className="navbar-brand">House App</Link>
      <Nav className="mr-auto" >
        <Link to="/addHouse" className="nav-link">Add House</Link>
        <Link to="/houses" className="nav-link">Manage Houses</Link>
        <Link to="/addPerson" className="nav-link">Add User</Link>
        <Link to="/people" className="nav-link">Users</Link>
      </Nav>
    </Navbar>
  );
}

额外说明 #

如果你的项目用的是React Router v6，相对路径的行为有一些细节调整，但核心逻辑还是一致的：带/的绝对路径从网站根目录开始匹配，相对路径则从当前路由的层级延伸。所以不管是v5还是v6，给导航栏的固定链接加上/都是最稳妥的做法，能彻底避免这种路径拼接错误。

这样修改后，不管你当前在哪个页面，点击导航栏的链接都会直接跳转到根路径下的对应路由——比如从/addPersonToHouse/8点击"Users"就会正常跳转到/people啦！

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