React Router 中的组件主要分为三类：

• 路由器，例如 BrowserRouter 和 HashRouter
• 路由匹配器，例如 Route 和 Switch
• 导航，例如 Link，NavLink 和 Redirect

在 Web 应用程序中使用的所有组件建议都从 react-router-dom 导入

1、安装路由包

javascript
复制代码
npm i react-router-dom --save

2、路由组件

路由组件分为两种：BrowserRouter（history 模式） 和 HashRouter（hash 模式），用法一样，但是 url 展示不一样，其中 hash 模式带有 # 号符，如下所示：

• history 模式：http://localhost:3000/page2
• hash 模式：http://localhost:3000/#/page2

2.1、BrowserRouter

javascript
复制代码
class App extends React.Component {
  render () {
    return (
      <BrowserRouter>
        <Route path="/page1" exact component={Page1}></Route>
        <Route path="/page2" exact component={Page2}></Route>
        <Route path="/page3/:id" exact component={Page3}></Route>
      </BrowserRouter>
    );
  }
}

2.2、HashRouter

javascript
复制代码
class App extends React.Component {
  render () {
    return (
      <HashRouter>
        <Route path="/page1" exact component={Page1}></Route>
        <Route path="/page2" exact component={Page2}></Route>
        <Route path="/page3/:id" exact component={Page3}></Route>
      </HashRouter>
    );
  }
}

Route

Route 用来定义一个访问路径与 React 组件之间的关系。比如说，如果你希望用户访问 https://your_site.com/about 的时候加载 <About /> 这个 React 页面，那么你就需要用 Route:

ini
复制代码
<Route path="/about" element={<About />} />

Routes

Routes 是用来包住路由访问路径(Route)的。它决定用户在浏览器中输入的路径到对应加载什么 React 组件，因此绝大多数情况下，Routes 的唯一作用是用来包住一系列的 Route，比如如下

javascript
复制代码
import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

在这里，Routes 告诉了 React Router 每当用户访问根地址时，加载 Home 这个页面，而当用户访问 /about 时，就加载 <About /> 页面。

路由匹配原理

路由拥有三个属性来决定是否“匹配“一个 URL：

1. 嵌套关系 和
2. 它的 路径语法
3. 它的 优先级