community/learn/documentation/react-router-dom

React Router DOM 是一个用于构建单页应用的库，它可以帮助你管理路由和导航。以下是一些关于 React Router DOM 的基本概念和用法。

基本概念

React Router DOM 提供了几个关键组件来处理路由：

Router: 包含所有路由的根组件。
Route: 用于定义路由规则。
Switch: 包含多个 Route 组件，只有第一个匹配的 Route 会被渲染。

快速开始

要开始使用 React Router DOM，首先需要安装它：

npm install react-router-dom

然后，在你的组件中引入并使用它：

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} />
        {/* 更多路由 */}
      </Switch>
    </Router>
  );
}

export default App;

路由匹配

React Router DOM 使用路径匹配来确定渲染哪个组件。以下是一些匹配规则：

path: 路径必须完全匹配。
exact: 如果设置为 true，则只有当路径完全匹配时才会渲染组件。

例如：

<Route path="/about" component={About} />

这个路由将只匹配 /about 路径。

动态路由

React Router DOM 支持动态路由，允许你根据路径参数渲染不同的组件。以下是一个动态路由的例子：

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

在这个例子中，:id 是一个参数，它将匹配任何包含 /user/ 后跟一个数字的路径。

图片示例

了解更多关于 React Router DOM