如何设置React Router相对Link，在语言参数嵌套路由内导航？

你的问题核心在于没有正确利用React Router的路由相对路径规则，以及绝对路径的使用场景不对。以下是具体的解决方法：

问题根源 #

1. Home链接的绝对路径问题：<Link to="/">是绝对路径，会直接跳转到网站根域名（domain.com），而不是你期望的domain.com/en。
2. 子页面的相对路径层级问题：当你在/en/first页面时，<Link to="second">是相对于当前页面路径的相对路径，所以会拼接成/en/first/second，而非回到/en层级再拼接。

解决方案 #

方案一：用布局组件嵌套路由（推荐） #

将导航组件放在嵌套路由的布局中，让Link的相对路径基于父路由（/en）而非当前页面路径：

1. 修改路由结构，添加布局组件：

import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 用Layout作为/en路由的根元素，包含导航和子路由出口 */}
        <Route path="/en" element={<Layout />}>
          <Route index element={<Page text="Home Page!" />} />
          <Route path="first" element={<Page text="First Page!" />} />
          <Route path="second" element={<Page text="Second Page!" />} />
        </Route>
        <Route
          path="*"
          element={
            <Page
              text="To begin, don't click anything. Change the path to /en"
            />
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

// 布局组件：包含导航和子路由内容的出口
const Layout = () => {
  return (
    <>
      <Navigation />
      <Outlet />
    </>
  );
};

2. 修改Navigation组件的Link：

import { Link } from 'react-router-dom';

const Navigation = () => {
  return (
    <ul>
      <li>
        <Link to=".">Home</Link> {/* "." 指向父路由的当前路径，即/en */}
      </li>
      <li>
        <Link to="first">First</Link> {/* 基于父路由拼接，即/en/first */}
      </li>
      <li>
        <Link to="second">Second</Link> {/* 基于父路由拼接，即/en/second */}
      </li>
    </ul>
  );
};

这样不管你在哪个子页面，点击导航都会直接基于/en层级跳转，不会出现路径嵌套错误。

方案二：动态拼接绝对路径（适配多语言场景） #

如果你的网站支持多种语言（不止en），可以通过useParams获取当前语言参数，拼接成绝对路径：

1. 先修改路由为动态语言参数：

<Route path="/:lang">
  <Route index element={<Page text="Home Page!" />} />
  <Route path="first" element={<Page text="First Page!" />} />
  <Route path="second" element={<Page text="Second Page!" />} />
</Route>

2. 在Navigation组件中动态生成路径：

import { Link, useParams } from 'react-router-dom';

const Navigation = () => {
  const { lang } = useParams(); // 获取当前语言参数，比如en

  return (
    <ul>
      <li>
        <Link to={`/${lang}`}>Home</Link>
      </li>
      <li>
        <Link to={`/${lang}/first`}>First</Link>
      </li>
      <li>
        <Link to={`/${lang}/second`}>Second</Link>
      </li>
    </ul>
  );
};

这种方式可以灵活适配不同语言前缀的路由，避免硬编码路径。

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