community/tutorials/react-js/docs/router/nested

React.js 路由嵌套教程

在 React.js 应用中，嵌套路由是一种常见的需求。嵌套路由允许我们在子组件中定义路由，这样就可以在一个父组件中展示多个页面。

嵌套路由基本概念

嵌套路由指的是在一个父组件中，通过 <Route> 组件嵌套 <Switch> 组件，来实现子路由的展示。

示例

以下是一个简单的嵌套路由示例：

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

const ParentComponent = () => (
  <div>
    <h1>父组件</h1>
    <Switch>
      <Route path="/parent/child1" component={ChildComponent1} />
      <Route path="/parent/child2" component={ChildComponent2} />
    </Switch>
  </div>
);

const ChildComponent1 = () => (
  <div>
    <h2>子组件1</h2>
    <p>这是子组件1的内容。</p>
  </div>
);

const ChildComponent2 = () => (
  <div>
    <h2>子组件2</h2>
    <p>这是子组件2的内容。</p>
  </div>
);

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

export default App;

使用 React Router 版本 6 的嵌套路由

从 React Router 6 开始，嵌套路由的写法略有不同。以下是使用 React Router 6 的嵌套路由示例：

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

const ParentComponent = () => (
  <div>
    <h1>父组件</h1>
    <Routes>
      <Route path="child1" element={<ChildComponent1 />} />
      <Route path="child2" element={<ChildComponent2 />} />
    </Routes>
  </div>
);

const ChildComponent1 = () => (
  <div>
    <h2>子组件1</h2>
    <p>这是子组件1的内容。</p>
  </div>
);

const ChildComponent2 = () => (
  <div>
    <h2>子组件2</h2>
    <p>这是子组件2的内容。</p>
  </div>
);

const App = () => (
  <Router>
    <Route path="/" element={<ParentComponent />} />
  </Router>
);

export default App;

图片示例

下面是一个关于 React.js 路由嵌套的图片示例：

更多关于 React.js 路由嵌套的信息