guides/react-router

React Router 是 React 应用程序中常用的路由管理库。下面是一些关于 React Router 的基础指南。

安装

首先，确保你已经安装了 React 和 Create React App。

npm install react-router-dom

基本概念

React Router 提供了两种主要的组件来处理路由：

<BrowserRouter>：用于创建一个浏览器历史记录，通常用于服务器端渲染。
<HashRouter>：使用哈希值（#）进行路由，不需要服务器端渲染。

使用路由

假设你有一个简单的页面结构：

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

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

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

export default App;

在上面的例子中，当你访问 / 时，你会看到 Home 页面，当访问 /about 时，你会看到 About 页面。

动态路由

如果你想要动态路由，可以使用 :param 的形式：

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

在 User 组件中，你可以通过 this.props.match.params.id 访问动态参数。

高阶组件

React Router 还提供了一些高阶组件（HOC）来简化路由的使用：

<Redirect>：用于重定向到另一个路由。
<Switch>：类似于 <Switch>，但它只渲染第一个匹配的路由。

扩展阅读

想要了解更多关于 React Router 的信息，可以查看我们的React Router 指南。