或者

React 路由教程

React 路由是 React 应用中实现页面跳转和参数传递的重要工具。本教程将带您了解 React 路由的基本使用方法。

安装 React Router

首先，您需要安装 React Router。可以通过 npm 或 yarn 来安装：

npm install react-router-dom

yarn add react-router-dom

基本使用

React Router 主要由三个组件组成：<Router>, <Route>, <Switch>。

• <Router> 是整个路由系统的顶层组件，用于包裹所有路由组件。
• <Route> 是路由匹配组件，用于定义路由路径和对应的组件。
• <Switch> 是路由分发组件，用于根据路径匹配渲染对应的 <Route> 或 <Redirect> 组件。

以下是一个简单的示例：

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 path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

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

function About() {
  return <h1>关于我们</h1>;
}

function Contact() {
  return <h1>联系方式</h1>;
}

function NotFound() {
  return <h1>404 - 页面未找到</h1>;
}

export default App;

路由链接

在 React 应用中，您可以使用 <Link> 组件来创建路由链接。<Link> 组件与 <a> 标签类似，但不会触发页面刷新。

import React from 'react';
import { Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于我们</Link>
          </li>
          <li>
            <Link to="/contact">联系方式</Link>
          </li>
        </ul>
      </nav>
      {/* ... */}
    </div>
  );
}

路由参数

React Router 支持路由参数，您可以在路由路径中使用冒号来定义参数。

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

在组件中，您可以通过 this.props.match.params 来访问参数。

function User(props) {
  const { id } = props.match.params;
  return <h1>用户 {id}</h1>;
}

更多关于 React 路由的内容，您可以访问我们的React 路由文档。

React 路由文档

React_Router