菜鸟教程
教程 react tutorial

嵌套路由

什么是嵌套路由？

嵌套路由指的是在一个父路由的组件内部定义子路由。父路由和子路由之间的关系是层级的，子路由在父路由渲染时进行展示。React Router 提供了通过嵌套的 Route 实现这种结构。

示例

首先，在父组件中定义嵌套路由：

jsx 
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Layout } from './Layout';
import { Home } from './Home';
import { Dashboard } from './Dashboard';
import { Profile } from './Profile';

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

`

在这个示例中，Layout 组件是父路由，包含了三个子路由：Home、Dashboard 和 Profile。通过嵌套 Route，可以将不同的子页面嵌套在父页面中。

父组件：Layout

父组件通常包含布局、导航等内容，并通过嵌套的 Outlet 来渲染子路由。

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

function Layout() {
  return (
    <div>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/dashboard">Dashboard</a></li>
          <li><a href="/profile">Profile</a></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* 渲染子路由组件 */}
    </div>
  );
}

子组件：Home, Dashboard 和 Profile

这些子组件会根据父路由的路径进行渲染。当用户访问 / 时，Home 组件会被渲染；当访问 /dashboard 时，Dashboard 组件会被渲染；访问 /profile 时，Profile 组件会被渲染。

jsx 
export function Home() {
  return <h2>Welcome to Home Page</h2>;
}

export function Dashboard() {
  return <h2>Dashboard Page</h2>;
}

export function Profile() {
  return <h2>Profile Page</h2>;
}

总结

  • 嵌套路由允许你在父组件中嵌入子路由，实现页面的层级结构。
  • 使用 Outlet 来渲染父路由中的子路由组件。
  • 嵌套路由适用于具有父子页面关系的应用场景，如多级页面布局。

相关内容