当前位置：首页 > React

react嵌套路由如何定义

2026-01-25 06:59:11React

嵌套路由的定义方法

在React中，嵌套路由通常通过react-router-dom库实现，利用<Routes>和<Route>组件配置层级关系。以下是具体实现方式：

安装依赖 确保项目已安装react-router-dom（v6及以上版本）：

react嵌套路由如何定义

npm install react-router-dom

基本嵌套结构 在父路由组件中通过<Outlet />渲染子路由：

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

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

function Parent() {
  return (
    <div>
      <h1>Parent Component</h1>
      <Outlet />  {/* 子路由将在此处渲染 */}
    </div>
  );
}

动态路径参数

嵌套路由支持动态参数传递：

react嵌套路由如何定义

<Route path="/users/:userId" element={<UserLayout />}>
  <Route path="posts" element={<UserPosts />} />
  <Route path="settings" element={<UserSettings />} />
</Route>

默认子路由

通过index属性指定默认渲染的子组件：

<Route path="/dashboard" element={<Dashboard />}>
  <Route index element={<DashboardHome />} />
  <Route path="analytics" element={<DashboardAnalytics />} />
</Route>

路由组合方式

可将嵌套路由拆分到不同文件，通过useRoutes钩子集中管理：

const routes = [
  {
    path: '/admin',
    element: <AdminLayout />,
    children: [
      { path: 'users', element: <UserList /> },
      { path: 'products', element: <ProductList /> }
    ]
  }
];

function App() {
  return useRoutes(routes);
}