React Router 文档

React Router 是一个用于在 React 应用程序中处理客户端路由的库。它允许你定义一个路由配置，并根据用户的导航或路径参数渲染相应的组件。

安装

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

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

基本用法

React Router 提供了几个核心组件来处理路由：

• BrowserRouter：用于创建一个基于 HTML5 的历史API的浏览器路由。
• HashRouter：使用哈希值（#）进行路由。
• Route：定义一个路由匹配规则，用于渲染对应的组件。
• Switch：类似 Route 的容器组件，但只会渲染第一个匹配的 Route。

以下是一个简单的例子：

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

const Home = () => <h1>首页</h1>;
const About = () => <h1>关于我们</h1>;
const NotFound = () => <h1>404 Not Found</h1>;

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

export default App;

高级用法

React Router 还提供了许多高级功能，例如：

• 动态路由：使用 Route 组件的 path 属性可以创建动态路由。
• 嵌套路由：可以在组件内部嵌套 Route 组件来创建子路由。
• 导航：使用 Link 或 NavLink 组件进行页面跳转。

更多高级用法，请访问我们的高级文档。

图片

React Router 示例：

React Router 官方文档