React Router v6 文档

React Router 是一个用于在 React 应用中处理客户端路由的库。它使得在单页应用（SPA）中管理多个页面或视图变得容易。

快速开始

安装 React Router：

npm install react-router-dom

或者

yarn add react-router-dom

路由配置

在 React 应用中使用 React Router，你需要配置路由。这通常通过使用 <Routes> 和 <Route> 组件来完成。

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </BrowserRouter>
  );
}

在上面的代码中，<BrowserRouter> 是包裹整个应用的组件，它负责处理路由。<Routes> 和 <Route> 分别用于定义路由和路由对应的组件。

动态路由

React Router 支持动态路由，这允许你匹配包含动态参数的路径。

<Route path="/users/:id" element={<User />} />

在这个例子中，:id 是一个动态参数，它可以匹配任何字符串。

路由嵌套

你可以在一个路由内部嵌套另一个路由。

<Route path="/users/:id" element={<User />}>
  <Route path="profile" element={<Profile />} />
</Route>

在这个例子中，当你访问 /users/123/profile 时，Profile 组件会被渲染。

图片示例

React Router 的核心概念之一是路径匹配，以下是一个简单的示例：

了解更多关于 React Router 的内容。

抱歉，您的请求不符合要求