React Router 中实现嵌套路由和动态路由的示例

针对你提出的问题，“React Router 中实现嵌套路由和动态路由的示例”的完整攻略，我将分为以下步骤进行讲解。

1. 安装 React Router

在开始之前，首先需要安装 React Router，可以使用以下命令进行安装：

npm install react-router-dom

1. 创建基本路由

首先，我们需要创建一个基本的路由，并在其中放置一个静态页面或组件。

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

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
            </ul>
          </nav>

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
  }
}

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

export default App;

以上代码实现了两个基本的路由，分别是 / 和 /about。

1. 实现嵌套路由

要实现嵌套路由，我们需要在一个父路由内配置多个子路由。

以下是一个示例代码：

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

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/topics">Topics</Link>
              </li>
            </ul>
          </nav>

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/topics" component={Topics} />
        </div>
      </Router>
    );
  }
}

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.path}/:topicId`} component={Topic} />
    <Route exact path={match.path} render={() => <h3>Please select a topic.</h3>} />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);

export default App;

以上代码中，我们在 Topics 路由内部定义了三个子路由 /rendering、/components 和 /props-v-state，并使用 match.url 和 match.path 进行路由的嵌套。

这个示例的效果如下所示：

/              -> Home
/about         -> About
/topics        -> Topics
/topics/       -> Please select a topic.
/topics/:id    -> Show the topic whose ID is ':id'

1. 实现动态路由

要实现动态路由，我们需要在路由路径中定义参数并使用 React Router 的 Link 组件进行传递。

以下是一个示例代码：

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

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/topics">Topics</Link>
              </li>
            </ul>
          </nav>

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/topics" component={Topics} />
        </div>
      </Router>
    );
  }
}

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.path}/:id`} component={Topic} />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>Topic ID: {match.params.id}</h3>
  </div>
);

export default App;

在以上代码中，我们使用了 :id 这个参数作为路由路径的一部分，然后在 Link 组件中传递了这个参数。最终，我们可以通过 match.params.id 获取到路由参数。

这个示例的效果如下所示：

/              -> Home
/about         -> About
/topics        -> Topics
/topics/:id    -> Show the topic whose ID is ':id'