React Router 是一个基于 React 的路由库，它允许你为单页应用（SPA）添加路由功能。以下是一些关于 React Router 的基础教程。

基础概念

React Router 主要由三个核心组件组成：

  • <Router>：包裹整个应用，管理路由状态。
  • <Route>：定义路由规则，渲染对应的组件。
  • <Switch>：包裹 <Route>，确保渲染一个 <Route>。

安装

首先，你需要安装 React Router：

npm install react-router-dom

示例

以下是一个简单的 React Router 示例：

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NoMatch} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function NoMatch() {
  return <h1>404 Not Found</h1>;
}

export default App;

路由参数

React Router 允许你为路由添加参数。以下是一个示例：

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

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

动态路由

React Router 也支持动态路由。以下是一个示例：

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

在这个例子中，/users/:username 是一个动态路由，它将匹配 /users/any-name、/users/another-name 等路径。

高级用法

React Router 还提供了许多高级用法，例如：

  • <Redirect>：重定向到另一个路由。
  • <Link>：创建一个导航链接，而不是 <a> 标签。
  • <NavLink>：一个带有激活状态的高亮链接。

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

图片展示

React Router 的核心组件和概念：

React_Router_Components