React Router v6同级路由跳转URL未替换反而追加的问题

问题核心：你用的是相对路径跳转，React Router会基于当前页面的URL拼接新路径，所以从/home/sibling1跳转到sibling2时，路径会被追加为/home/sibling1/sibling2。

三种解决方法： #

1. 使用绝对路径

直接指定完整路径，确保跳转目标是/home/sibling2：

<div className='btn'>
  <Link to="/home/sibling2">
    <button>sibling2</button>
  </Link>
</div>

2. 使用相对路径回到父级

用../回到/home路径下，再跳转同级路由：

<div className='btn'>
  <Link to="../sibling2">
    <button>sibling2</button>
  </Link>
</div>

3. 统一在父组件（Home）中放置导航

如果把跳转链接放在Home组件里（嵌套路由的父元素），直接用相对路径sibling2就会正常跳转到/home/sibling2——此时相对路径的基准是父路由/home：

// Home组件代码示例
import { Outlet, Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <div className='btn'>
        <Link to="sibling1">sibling1</Link>
      </div>
      <div className='btn'>
        <Link to="sibling2">sibling2</Link>
      </div>
      <div className='btn'>
        <Link to="sibling3">sibling3</Link>
      </div>
      {/* 渲染子路由组件 */}
      <Outlet />
    </div>
  );
}

注意：Home组件必须引入并使用Outlet，否则子路由的内容无法渲染。

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