React Router 教程

React Router 是一个基于 React 的路由库，它可以帮助你为单页应用（SPA）添加导航功能。以下是一个简单的 React Router 教程，帮助你快速上手。

安装 React Router

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

npm install react-router-dom
# 或者
yarn add react-router-dom

基本使用

React Router 主要包括三个组件：<Router>, <Route>, <Switch>。

<Router> 是整个路由系统的入口，它需要包裹你的应用。
<Route> 用于定义路由规则，它需要指定 path 和 component 属性。
<Switch> 用于包裹 <Route>，它只会渲染匹配到的第一个 <Route>。

以下是一个简单的例子：

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;

动态路由

如果你需要在路由中传递参数，可以使用动态路由。以下是一个例子：

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

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

路由导航

React Router 提供了 Link 组件来实现路由导航。以下是一个例子：

<Link to="/about">About</Link>

当点击这个链接时，它将会导航到 /about 路径。

高级用法

React Router 还提供了很多高级用法，比如路由守卫、重定向、嵌套路由等。你可以参考官方文档来了解更多。