或者

React Router 简介

React Router 是一个基于 React 的路由库，它允许你为单页应用（SPA）创建动态路由。通过使用 React Router，你可以轻松地管理应用程序的导航和页面渲染。

快速开始

首先，你需要安装 React Router。你可以使用 npm 或 yarn 来安装：

npm install react-router-dom

yarn add react-router-dom

基本用法

以下是一个简单的 React Router 应用示例：

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

const Home = () => <h1>首页</h1>;
const About = () => <h1>关于我们</h1>;
const Contact = () => <h1>联系方式</h1>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于我们</Link>
        </li>
        <li>
          <Link to="/contact">联系方式</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  </Router>
);

export default App;

在这个例子中，我们创建了一个简单的导航菜单，并且定义了三个组件：Home、About 和 Contact。通过 <Switch> 和 <Route> 组件，我们可以根据不同的路径渲染不同的组件。

路由参数

React Router 允许你使用动态路由参数。例如，如果你想创建一个用户详情页面，你可以这样做：

<Route path="/user/:id" component={User} />

在这个例子中，:id 是一个动态参数，你可以通过 this.props.match.params.id 来访问它。

高级功能

React Router 还提供了许多高级功能，如嵌套路由、链接、重定向等。你可以通过官方文档了解更多信息：React Router 官方文档

总结

React Router 是一个功能强大的库，可以帮助你构建复杂的单页应用。通过使用 React Router，你可以轻松地管理应用程序的导航和页面渲染。