当前位置：首页 > React

react如何嵌套路由

2026-03-10 22:39:37React

嵌套路由的实现方法

在React中实现嵌套路由通常使用react-router-dom库（v5或v6）。以下是两种常见方案的详细说明：

使用React Router v6

安装依赖：

npm install react-router-dom@6

定义父路由组件（如Layout.js）：

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

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

配置路由（如App.js）：

react如何嵌套路由

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="dashboard" element={<Dashboard />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

使用React Router v5

安装依赖：

npm install react-router-dom@5

定义父路由组件：

react如何嵌套路由

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

function Layout({ children }) {
  return (
    <div>
      <h1>App Header</h1>
      {children}
    </div>
  );
}

配置路由：

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

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" render={() => (
          <Layout>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/dashboard" component={Dashboard} />
          </Layout>
        )} />
      </Switch>
    </BrowserRouter>
  );
}

动态嵌套路由

对于动态路径的嵌套（如用户个人页面）：

// React Router v6
<Route path="users/:id" element={<UserLayout />}>
  <Route index element={<Profile />} />
  <Route path="posts" element={<Posts />} />
  <Route path="settings" element={<Settings />} />
</Route>

路由参数传递

在子组件中获取路由参数：

// React Router v6
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}