React Router 是一个基于 React 的路由库,它允许你为单页应用(SPA)创建复杂的导航。以下是一些关于 React Router 的基本概念和用法。

安装

首先,你需要安装 React Router。你可以使用 npm 或 yarn 来安装:

npm install react-router-dom
# 或者
yarn add react-router-dom

基本用法

React Router 主要由三个组件组成:<Router>, <Route>, 和 <Switch>

  • <Router> 是路由器的顶层组件,它需要一个 history 对象作为属性。
  • <Route> 是路由匹配组件,它需要一个 path 属性来指定路由路径,以及一个 component 属性来指定当路径匹配时渲染的组件。
  • <Switch> 是一个容器组件,它只会渲染第一个匹配的 <Route><Redirect>

以下是一个简单的例子:

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 exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

export default App;

高级用法

React Router 还支持许多高级用法,例如:

  • 动态路由匹配
  • 嵌套路由
  • 命名路由
  • 导航守卫

更多高级用法,请参考官方文档

React Router Logo