当前位置：首页 > React

react如何实现路由嵌套

2026-01-24 13:01:37React

使用 React Router 实现嵌套路由

React Router v6 提供了简洁的嵌套路由实现方式，主要通过 <Outlet> 组件和子路由配置完成。

安装 React Router：

npm install react-router-dom

基础嵌套路由配置

在根组件中定义父路由和子路由结构：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/parent" element={<Parent />}>
          <Route path="child" element={<Child />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

在父组件中使用 Outlet

父组件需要包含 <Outlet> 来渲染子路由内容：

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

function Parent() {
  return (
    <div>
      <h2>Parent Component</h2>
      <Outlet />
    </div>
  );
}

多级嵌套路由

可以无限层级嵌套路由：

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />}>
    <Route path="profile" element={<Profile />} />
  </Route>
</Route>

索引路由

为父路由设置默认显示的子组件：

<Route path="/user" element={<UserLayout />}>
  <Route index element={<UserHome />} />
  <Route path="profile" element={<UserProfile />} />
</Route>

动态参数传递

嵌套路由支持动态参数：

<Route path="/products" element={<Products />}>
  <Route path=":productId" element={<ProductDetail />} />
</Route>

相对路径与绝对路径

子路由默认使用相对路径：

父路由 /parent
子路由 child 会组合成 /parent/child

使用绝对路径需以 / 开头：

<Route path="/child" element={<Child />} />

路由组合模式

可以将路由配置抽离为独立对象：

const routes = [
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'about', element: <About /> }
    ]
  }
];

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map((route) => (
          <Route key={route.path} {...route} />
        ))}
      </Routes>
    </BrowserRouter>
  );
}