React Router 是一个基于 React 的路由库，它允许你在单页应用中管理不同视图的显示。以下是一些关于 React Router 的基础文档。

基础概念

React Router 主要包含三个核心组件：<Router>, <Route>, 和 <Switch>。

  • <Router>：用于包裹整个应用，并提供上下文信息。
  • <Route>：用于定义路由规则，当路径匹配时渲染对应的组件。
  • <Switch>：用于包裹 <Route> 组件，只渲染第一个匹配的 <Route>。

安装

首先，你需要安装 React Router：

npm install react-router-dom

使用方法

以下是一个简单的例子：

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

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

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

export default App;

高级功能

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

  • 动态路由
  • 嵌套路由
  • 导航链接
  • 历史模式

更多高级功能，请参考React Router 官方文档.

图片展示

React Router DOM

希望这份文档能帮助你更好地理解 React Router。如果你有任何疑问，欢迎访问我们的社区论坛进行讨论。