前言

今天我们一起看一看react中路由相关内容

一、react路由介绍

1. 前端应用发展

浏览器每向服务器发起一次请求，服务器生成一个html页面，返回给浏览器

现在 SPA（单页应用程序），也就是只有一个 HTML 页面（首页）的应用程序。其余页面（组件）都是在第一次请求完成之后由 JavaScript 动态生成的。

一个 SPA 应用程序由多个组件（功能）组成，而多个组件不会同时出现在页面中。这就会产生一个问题：“某个组件什么时候该出现什么时候该消失？”

2. 前端路由的功能

让用户从一个页面（组件）导航到另一个页面（组件）

前端路由是一套映射规则，在React中，是 URL路径与组件的对应关系

使用React路由简单来说，就是配置路径和组件（配对）

二、路由的基本使用

1. 使用步骤

安装：npm i react-router-dom
导入：路由的三个核心组件Router / Route / Link

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

使用： Router 组件包裹整个应用（重要）

<Router>
  <div>
    <Link />
    <Route />
  </div>
</Router>

使用 Link 组件作为组件切换按钮（起点）

<Link to="/first">页面一</Link>

使用 Route 组件配置路由规则和要展示的组件（终点）

const First = () => <p>页面一的页面内容</p>
<Router>
  <div>
    <Link to="/first">页面一</Link>
    <Route path="/first" component={First}></Route>
  </div>
</Router>

2. 常用组件说明

Router 组件：包裹整个应用，一个 React 应用只需要使用一次 两种常用 Router：HashRouter 和 BrowserRouter HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first） BrowserRouter（推荐）：使用 H5 的 history API 实现（localhost:3000/first） Link 组件：用于指定导航链接（a 标签）

代码如下（示例）：

// to属性：浏览器地址栏中的pathname（location.pathname）
<Link to="/first">页面一</Link>

Route 组件：指定路由展示组件相关信息

// path属性：路由规则
// component属性：展示的组件
// Route组件写在哪，渲染出来的组件就展示在哪
<Route path="/first" component={First}></Route>

3. 路由的执行过程

点击 Link 组件（a标签），修改了浏览器地址栏中的 url 。
React 路由()监听到地址栏 url 的变化。 -- React 路由()内部遍历所有组件，使用路由规则（ path ）与 pathname 进行匹配。
当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容。

总结

All time is no time when it is past.