前言

本来体验下react-router的，然后

去react-router npm查看，发现了官方的提示如下:

这个包为 React Router 提供了核心路由功能，但你可能不想直接安装它。如果您正在编写将在浏览器中运行的应用程序，您应该安装 react-router-dom。同样，如果您正在编写 React Native 应用程序，则应该安装 react-router-native。这两个都将安装 react-router 作为依赖项

也就是说如果想在react项目中添加路由功能，应该使用react-router-dom而不是react-router,直接使用最新版的react-router可能会报错

既然官方使用react-router-dom替代了react-router，那我们就学习一下怎么使用react-router-dom实现路由功能吧

快速开始

要在 Web 应用程序中开始使用 React Router，您需要一个 React Web 应用程序。如果您需要创建一个，我们建议您尝试Create React App。这是一个流行的工具，与 React Router 配合得非常好。首先，安装 create-react-app 并用它创建一个新项目

npx create-react-app demo-app
cd demo-app

安装

您可以使用 npm 或 yarn 安装 React Router。由于我们正在构建一个 Web 应用程序，因此我们将在本指南中使用 react-router-dom

npm install react-router-dom
npm run start

接下来，将以下任一示例复制/粘贴到 src/App.js。

第一个例子：基本路由

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

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* <Switch>标签会渲染将匹配URL的第一个<Route>进行渲染，如果最前面的<Route>匹配了，
        后面的就不会渲染，所以对于path="/"的<Route>应该放在最后面，<Switch>相当于js里的switch */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}