react如何嵌套路由

嵌套路由的实现方法

在React中，嵌套路由通常通过react-router-dom库实现。嵌套路由允许在父路由组件内部定义子路由，形成层级结构。

安装react-router-dom

确保项目中已安装react-router-dom：

npm install react-router-dom

基本嵌套路由配置

使用Routes和Route组件定义嵌套路由结构。父路由组件通过Outlet渲染子路由内容。

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

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

function Child() {
  return <h3>Child Component</h3>;
}

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

动态嵌套路由

嵌套路由支持动态路径参数，通过useParams获取参数值。

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

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users">
          <Route path=":userId" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

嵌套路由的索引路由

索引路由指定父路由路径下的默认子路由，使用index属性。

function Dashboard() {
  return <h3>Dashboard Home</h3>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Parent />}>
          <Route index element={<Dashboard />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

嵌套路由的布局模式

通过布局组件包裹嵌套路由，实现共享的UI结构。

function Layout() {
  return (
    <div>
      <nav>Navigation Bar</nav>
      <Outlet />
    </div>
  );
}

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

嵌套路由的编程式导航

使用useNavigate钩子实现编程式导航。

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

function Home() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/parent/child')}>
      Go to Child
    </button>
  );
}