17 实现嵌套路由

在我们上一节中，我们学习了如何使用 React Router 来实现基本的路由管理。在这一节中，我们将重点关注如何在 React 应用中实现嵌套路由。嵌套路由允许我们在一个组件内渲染一个子路由组件，这在构建复杂布局时尤其有用。

什么是嵌套路由？

嵌套路由是指在主路由的基础上，定义子路由。这种方式使得我们的应用能够根据不同的 URL 渲染出对应的组件，且可以在一个页面内嵌套多个视图。这在创建有层次结构的用户界面时是非常有用的。

案例：创建一款博客管理系统

为了更好地理解嵌套路由的实现，我们将以一个简单的博客管理系统为例，来展示如何使用 React Router 的嵌套路由功能。

步骤一：安装所需依赖

首先，确保你已经安装了 react-router-dom。你可以在你的项目目录下运行以下命令：

npm install react-router-dom

步骤二：设置路由

假设我们要管理一个博客的列表和每篇博客的详细信息。我们会首先创建主路由，然后在主路由中嵌套子路由。

创建基本组件

我们首先创建几个简单的组件：

// components/Home.tsx
import React from 'react';

const Home: React.FC = () => {
    return <h1>博客管理系统</h1>;
};

export default Home;

// components/Posts.tsx
import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const Posts: React.FC = () => {
    return (
        <div>
            <h2>博客列表</h2>
            <ul>
                <li><Link to="1">博客 1</Link></li>
                <li><Link to="2">博客 2</Link></li>
            </ul>
            {/* Outlet 组件用于渲染子路由 */}
            <Outlet />
        </div>
    );
};

export default Posts;

// components/PostDetail.tsx
import React from 'react';

const PostDetail: React.FC<{ id: string }> = ({ id }) => {
    return <h3>你正在查看博客 {id} 的详细信息</h3>;
};

export default PostDetail;

步骤三：配置Router

接下来，我们需要设置主路由以及嵌套的子路由。在我们的 App.tsx 中，配置如下：

// App.tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Posts from './components/Posts';
import PostDetail from './components/PostDetail';

const App: React.FC = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="posts" element={<Posts />}>
                    <Route path=":id" element={<PostDetail />} />
                </Route>
            </Routes>
        </Router>
    );
};

export default App;

代码解析

1. 我们使用 BrowserRouter 作为路由的顶层组件。
2. 在 Routes 中，我们定义了根路径 / 对应 Home 组件。
3. 路径 posts 使用 Posts 组件，并嵌套了子路由 :id，此路径对应 PostDetail 组件。

• :id 是一个动态路由参数，表示博客的 ID。
• Outlet 组件用于在 Posts 组件中渲染匹配的子路由。

步骤四：访问嵌套路由

运行应用后，你可以访问以下链接来查看效果：

• 访问 /: 显示 “博客管理系统”。
• 访问 /posts: 显示博客列表。
• 访问 /posts/1: 显示博客 1 的详细信息。
• 访问 /posts/2: 显示博客 2 的详细信息。

总结

在本节中，我们实现了一个简单的博客管理系统，演示了如何使用 React Router 中的嵌套路由来构建层次分明的界面。嵌套路由使得组件的组织和管理更加简洁高效。下一篇我们将深入探讨如何利用路由参数和实现页面之间的导航。

这就是关于实现嵌套路由的基本知识和案例，期待在下篇与您继续探讨路由参数与导航相关的内容！