在 React.js 中实现嵌套路由 - React Router DOM V6 指南

2026-02-01 22:29:12 0条评论 2次阅读 0人点赞

React JS 中的嵌套路由提供了一种分层导航功能，这是通过 React Router Dom 中的 Outlet 组件来实现的。React 中的路由不仅为页面提供路由，还能在该页面内渲染多个组件。嵌套路由通过在父路由组件内部为子组件定义路由来实现这一点。

前置知识：

React 中的嵌套路由

React 中的嵌套路由用于创建多级导航。它允许我们构建复杂的布局，并在不同层级渲染组件。这主要得益于 react router dom 提供的 Outlet 组件。

语法：

// 定义嵌套路由
<Route path="parent" element ={}>
    <Route path="child" element = {}/>


// 定义 Outlet 位置以渲染子组件
const Parent = ()=>{
    return()
}

嵌套路由的实现思路

为了在 React 中实现嵌套路由，我们将借助 INLINECODEe662a368 和 INLINECODE2dc8138a 属性在父路由内部定义子路由。在父组件中，在你希望渲染嵌套组件的位置使用 Outlet 组件。

实现嵌套路由的步骤

步骤 1： 在终端中输入以下命令以创建一个 React 应用程序。

npx create-react-app nesting-demo

步骤 2： 现在，通过运行以下命令进入项目文件夹，即 nesting-demo。

cd nesting-demo

项目结构：

!Screenshot-from-2023-10-11-11-44-50

步骤 3： 让我们安装本项目所需的 React Router DOM npm 包。

npm i react-router-dom

安装完成后 package.json 中的依赖列表

{
    "name": "nesting-demo",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
****        "react-router-dom": "^6.16.0",****
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

示例： 定义两个页面 INLINECODE118ce47d（主页）和 INLINECODEc5206503（课程），并为课程定义名为 INLINECODE363c4ec1（列表）和 INLINECODEd39a8a23（搜索）的子组件。为主页和课程页面使用 Routes（路由），并在课程路由内部定义列表和搜索路由。按照下图所示在课程文件中链接这些组件。

CSS

CODEBLOCK_9e5ef026

JavaScript

CODEBLOCK_6cf2a77f