zh/react/router/introduction

React Router 简介

React Router 是一个基于 React 的路由库，它允许你为单页应用（SPA）创建复杂且动态的导航。通过使用 React Router，你可以定义路由，并渲染对应的组件，从而实现页面的无刷新切换。

安装

首先，你需要安装 React Router：

npm install react-router-dom

或者使用 yarn：

yarn add react-router-dom

基本用法

React Router 提供了 <Switch> 和 <Route> 组件来定义路由。

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

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/" exact component={Home} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

在这个例子中，当用户访问 /about 时，About 组件将被渲染；访问 /contact 时，Contact 组件将被渲染；访问根路径 / 时，Home 组件将被渲染。

动态路由参数

React Router 允许你使用动态路由参数来匹配路径。例如，如果你想创建一个用户个人资料页面，你可以这样做：

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

在这个例子中，:id 是一个动态参数，你可以通过 this.props.match.params.id 访问它。

路由链接

使用 <Link> 组件来创建路由链接，而不是使用 <a> 标签：

<Link to="/about">About</Link>

这会渲染为 <a href="/about">About</a>。

高级路由

React Router 还支持许多高级功能，如嵌套路由、重定向、路由守卫等。

更多高级用法，请参考React Router 官方文档。