# 嵌套路由

URL: https://caijiao.org/react/chapter8/nested-routes
Source: docs/react/chapter8/nested-routes.md
Description: 嵌套路由是指在一个路由的组件内部，渲染另一个子路由的组件。这种结构适用于具有层级关系的页面，通常用于展示父子关系的页面布局。React Router 允许你在路由定义中嵌套 'Route'，从而实现嵌套路由。

## 什么是嵌套路由？

嵌套路由指的是在一个父路由的组件内部定义子路由。父路由和子路由之间的关系是层级的，子路由在父路由渲染时进行展示。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 (
    
  );
}
````

在这个示例中，`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 />
       {/* 渲染子路由组件 */}
    </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` 来渲染父路由中的子路由组件。
* 嵌套路由适用于具有父子页面关系的应用场景，如多级页面布局。