如何在React Router中进行嵌套路由配置？

在 React Router 中，嵌套路由允许你在一个路由组件内部再定义子路由，这在构建复杂的单页面应用（SPA）时非常有用。下面分别介绍 React Router v5 和 v6 中嵌套路由的配置方法。

React Router v5

1. 安装 React Router v5

npm install react-router-dom@5

2. 基本配置步骤和示例

• 定义父组件和子组件：首先创建父组件和子组件，父组件将包含子路由的渲染区域。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// 父组件
const Parent = () => {
    return (
        <div>
            <h1>Parent Component</h1>
            <ul>
                <li><Link to="/parent/child1">Child 1</Link></li>
                <li><Link to="/parent/child2">Child 2</Link></li>
            </ul>
            {/* 子路由渲染区域 */}
            <Switch>
                <Route path="/parent/child1" component={Child1} />
                <Route path="/parent/child2" component={Child2} />
            </Switch>
        </div>
    );
};

// 子组件 1
const Child1 = () => <h2>Child 1 Component</h2>;

// 子组件 2
const Child2 = () => <h2>Child 2 Component</h2>;

const App = () => {
    return (
        <Router>
            <Switch>
                <Route path="/parent" component={Parent} />
            </Switch>
        </Router>
    );
};

export default App;

• 解释：在上述代码中，Parent 组件是父路由组件，它包含一个导航菜单和一个 Switch 组件，Switch 组件用于渲染匹配的子路由组件。当用户点击导航链接时，会根据路径渲染相应的子组件。

React Router v6

1. 安装 React Router v6

npm install react-router-dom

2. 基本配置步骤和示例

• 使用 Outlet 组件：在 React Router v6 中，使用 Outlet 组件来渲染子路由。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';

// 父组件
const Parent = () => {
    return (
        <div>
            <h1>Parent Component</h1>
            <ul>
                <li><Link to="child1">Child 1</Link></li>
                <li><Link to="child2">Child 2</Link></li>
            </ul>
            {/* 子路由渲染区域 */}
            <Outlet />
        </div>
    );
};

// 子组件 1
const Child1 = () => <h2>Child 1 Component</h2>;

// 子组件 2
const Child2 = () => <h2>Child 2 Component</h2>;

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/parent" element={<Parent />}>
                    <Route path="child1" element={<Child1 />} />
                    <Route path="child2" element={<Child2 />} />
                </Route>
            </Routes>
        </Router>
    );
};

export default App;

• 解释：在 React Router v6 中，Routes 组件用于包裹所有的路由配置。Route 组件可以嵌套使用，父 Route 组件的 element 属性指定父组件，子 Route 组件会在父组件的 Outlet 位置渲染。Link 组件的 to 属性可以使用相对路径。

动态嵌套路由

1. React Router v6 示例

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';

// 父组件
const Parent = () => {
    const { id } = useParams();
    return (
        <div>
            <h1>Parent Component - ID: {id}</h1>
            <ul>
                <li><Link to="child1">Child 1</Link></li>
                <li><Link to="child2">Child 2</Link></li>
            </ul>
            <Outlet />
        </div>
    );
};

// 子组件 1
const Child1 = () => <h2>Child 1 Component</h2>;

// 子组件 2
const Child2 = () => <h2>Child 2 Component</h2>;

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/parent/:id" element={<Parent />}>
                    <Route path="child1" element={<Child1 />} />
                    <Route path="child2" element={<Child2 />} />
                </Route>
            </Routes>
        </Router>
    );
};

export default App;

在这个示例中，父路由使用了动态参数 :id，子路由嵌套在父路由内部。父组件可以通过 useParams 钩子获取动态参数。

可以在 React Router 中实现嵌套路由的配置，根据应用的需求构建复杂的路由结构。