React Router嵌套路由配置：如何设置/admin/:userId/settings/:settingId路由

嘿，我来帮你搞定这个嵌套路由的配置问题～你的写法其实差了关键几步，而且得看你用的是React Router v5还是v6（这俩版本的嵌套路由写法差别不小），我分开给你讲：

v6对嵌套路由做了更清晰的设计，核心要用到<Outlet>组件作为子路由内容的占位符，同时注意路径的相对写法：

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

// 父级页面组件
function AdminPage() {
  // 在这里获取userId参数
  const { userId } = useParams();
  return (
    <div>
      <h2>Admin Panel for User {userId}</h2>
      {/* 子路由的内容会渲染在这个Outlet里 */}
      <Outlet />
    </div>
  );
}

// 子级设置页面组件
function SettingPage() {
  // 可以同时获取userId和settingId两个参数
  const { userId, settingId } = useParams();
  return (
    <div>
      <p>Editing Setting #{settingId} for User {userId}</p>
    </div>
  );
}

// 全局路由配置
function App() {
  return (
    <Routes>
      {/* 父路由定义基础路径 */}
      <Route path="/admin/:userId" element={<AdminPage />}>
        {/* 子路由用相对路径（不要加开头的/），会自动拼接成 /admin/:userId/settings/:settingId */}
        <Route path="settings/:settingId" element={<SettingPage />} />
      </Route>
    </Routes>
  );
}

关键注意点： #

• 父路由组件必须渲染<Outlet />，否则子路由的内容无处展示
• 子路由的路径是相对路径（无开头斜杠），会自动和父路由路径拼接
• 用useParams()钩子可以轻松获取URL中的动态参数

v5的嵌套路由逻辑和v6不同，核心是父路由不能加exact属性，同时要利用match.url来拼接子路由路径：

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

// 父级页面组件
function AdminPage({ match }) {
  // v5.1+支持useParams，更早版本可以用match.params获取参数
  const { userId } = useParams();
  return (
    <div>
      <h2>Admin Panel for User {userId}</h2>
      {/* 嵌套的Switch用来匹配子路由 */}
      <Switch>
        {/* 用match.url拼接父路径，生成完整的子路由路径 */}
        <Route path={`${match.url}/settings/:settingId`} component={SettingPage} />
      </Switch>
    </div>
  );
}

// 子级设置页面组件
function SettingPage() {
  const { userId, settingId } = useParams();
  return (
    <div>
      <p>Editing Setting #{settingId} for User {userId}</p>
    </div>
  );
}

// 全局路由配置
function App() {
  return (
    <Switch>
      {/* 父路由绝对不能加exact！否则子路由路径无法匹配父路由 */}
      <Route path="/admin/:userId" component={AdminPage} />
    </Switch>
  );
}

关键注意点： #

• 父路由必须去掉exact属性，否则只有完全匹配/admin/:userId的路径才会触发，子路由路径/admin/:userId/settings/:settingId会匹配失败
• 子路由路径可以通过match.url动态拼接，避免硬编码父路径

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