React Router v6重复点击导航链接路径重复追加异常问题

两个核心问题导致路径重复拼接：

• 导航链接使用了不带前导斜杠的相对路径
  React Router v6 中，NavLink/Link 的 to 属性如果不以 / 开头，会默认以当前访问路径为基准做相对拼接。比如当前处于 /projects 路径时，点击 to="projects" 的链接，就会在现有路径后追加子段，最终变成 /projects/projects，这是路径异常的直接诱因。
• 路由结构与布局组件用法不符合v6规范
  • 代码中把<Outlet />写在了<Router>组件外部，完全脱离路由上下文，属于无效代码
  • 目前给每个路由手动给Wrapper传children的写法冗余，没有利用v6嵌套路由的布局能力，后续维护成本高

第一步：修正导航链接路径 #

给所有非首页的导航路径加上前导斜杠，明确为根路径下的绝对路由，修改Navbar.jsx中的links配置：

const links = [
  {
    name:"Home",
    slug:"/",
  },
  {
    name:"Projects",
    slug:"/projects",
  },
  {
    name:"About",
    slug:"/about",
  },
  {
    name:"Contact",
    slug:"/email",
  },
]

改完这一步已经可以解决路径重复追加的问题，更推荐按下面的方式重构路由，彻底消除布局相关的重复代码。

第二步：用嵌套路由重构公共布局（推荐） #

把Wrapper作为父级布局路由，通过<Outlet />渲染子路由内容，不需要给每个业务页面手动包裹Wrapper。修改App.js代码如下：

import './App.css';
import {BrowserRouter as Router, Route, Outlet, Routes} from 'react-router-dom'
import {CommonScreen, Wrapper, About, Email, Projects} from './Barell'

// 公共布局容器
const CommonLayout = () => {
  return (
    <Wrapper>
      <Outlet />
    </Wrapper>
  )
}

function App() {
  return (
    <Router>
      <Routes>
        {/* 所有需要Navbar、Footer的页面都作为布局路由的子路由 */}
        <Route element={<CommonLayout />}>
          <Route index element={<CommonScreen/>}/>
          <Route path="about" element={<About/>}/>
          <Route path="projects" element={<Projects/>}/>
        </Route>
        {/* 不需要公共布局的页面单独定义 */}
        <Route path="email" element={<Email/>}/>
      </Routes>
    </Router>
  );
}

export default App;

原有Wrapper组件不需要做任何修改，之前写在Router外部的无效Outlet直接删除即可。重构完成后，后续新增需要公共头尾的页面时，只需要在CommonLayout的子路由下加配置即可，不需要重复引入Wrapper组件。

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