React Router 教程

React Router 是 React 应用中用于管理路由和页面跳转的库。下面是一些基本概念和用法。

基本用法

首先，确保你已经安装了 React 和 React Router。你可以使用以下命令进行安装：

npm install react-router-dom

在你的组件中，你可以使用 Router, Route, 和 Switch 来定义路由。

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

const Home = () => <h1>首页</h1>;
const About = () => <h1>关于我们</h1>;

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

export default App;

路由参数

有时候，你可能需要根据路径参数来渲染不同的组件。React Router 允许你这样做：

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

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

链接

你可以使用 Link 组件来创建导航链接：

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

const Navbar = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">首页</Link>
      </li>
      <li>
        <Link to="/about">关于我们</Link>
      </li>
    </ul>
  </nav>
);

扩展阅读

想要了解更多关于 React Router 的信息，可以阅读官方文档。

[

[