React Router Documentation 简介

React Router 是一个基于 React 的路由库，用于构建单页面应用（SPA）。以下是一些关于 React Router 的基本概念和使用方法。

快速开始

安装

首先，确保你已经安装了 React 和 React DOM。然后，使用 npm 或 yarn 安装 React Router：
```
npm install react-router-dom
```
或者
```
yarn add react-router-dom
```

基本使用

在你的 React 组件中，你可以使用 <BrowserRouter> 或者 <HashRouter> 来包裹你的应用。以下是一个简单的例子：

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

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

export default App;

在这里，<Route> 用于定义路由，<Switch> 用于渲染匹配的第一个 <Route> 或 <Redirect>。

路由组件

React Router 提供了三种类型的路由组件：

<Route>: 用于匹配路径并渲染对应的组件。
<Redirect>: 用于重定向到另一个路径。
<Switch>: 用于包裹 <Route> 或 <Redirect> 元素，只渲染第一个匹配的元素。

动态路由

React Router 允许你使用动态参数来创建动态路由。例如：

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

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

高级特性

React Router 还提供了许多高级特性，如：

命名路由：允许你在组件中引用路径。
Link 组件：用于创建导航链接。
嵌套路由：允许你在子组件中定义路由。
路由钩子：允许你在路由变化时执行副作用。

React Router Documentation 简介

快速开始

路由组件

动态路由

高级特性

更多信息