react_tutorial/react_router_nested_layout

React Router Nested Layout 是 React 中用于实现嵌套路由的常用方法。这种布局方式允许在一个组件内部嵌套多个路由组件，从而实现复杂的应用界面。

基本概念

1. Route 组件：用于定义路由匹配规则，当匹配到特定的路径时，渲染对应的组件。
2. Switch 组件：包裹 Route 组件，确保只有第一个匹配的 Route 被渲染。
3. Nested Routes：在父 Route 组件内部嵌套子 Route 组件，实现嵌套路由。

实现步骤

1. 设置基本路由：首先定义父路由，例如 /about。
2. 嵌套子路由：在父路由的组件内部，使用 Switch 包裹多个 Route 组件，定义子路由。

import React from 'react';
import { Switch, Route } from 'react-router-dom';

function About() {
  return (
    <div>
      <h1>About</h1>
      <Switch>
        <Route path="/about/team" component={Team} />
        <Route path="/about/location" component={Location} />
      </Switch>
    </div>
  );
}

3. 渲染子组件：在对应的子路由组件中，可以根据需要渲染具体的页面内容。

示例

假设我们有一个关于团队介绍的路由 /about/team，可以在 Team 组件中实现如下：

function Team() {
  return (
    <div>
      <h2>团队介绍</h2>
      <p>这里是团队介绍内容...</p>
    </div>
  );
}

扩展阅读

想要了解更多关于 React Router 的知识，可以访问我们的 React Router 教程。