React路由基础、路由基本使用、组件说明、执行过程、编程式导航、默认路由

一、React路由介绍

现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。

• 前端路由功能：让用户从一个视图（页面）导航到另一个视图（页面）
• 前端路由是一套映射规则，在React中，是URL路径与组件的对应关系
• 使用React路由简单来说，就是配置路径和组件

二、路由的基本使用

使用步骤

• 安装： yarn add react-router-dom

  • 如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn

• 导入路由的三个核心组件： Router / Route / Link

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

• 使用Router 组件包裹整个应用

<Router>
  <div className="App">
  // ... 省略页面内容
  </div>
</Router>
1
2
3
4
5

• 使用 Link 组件作为导航菜单（路由入口）

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

• 使用 Route 组件配置路由规则和要展示的组件（路由出口）
• Route包含在Routes元素中

// const First = () => 
页面一的内容
function First() {
  return (
    <p>页面一的内容</p>
  )
}


// 使用Router组件包裹整个应用
const App = () => (
  <Router>
    <div>
      <h1>React路由基础</h1>
      {/*  指定路由入口 */}
      <Link to="/first">页面一</Link>

      {/*  指定路由出口 */}
      <Routes>
        <Route path="/first" element={<First></First>} />
      </Routes>
    </div>
  </Router>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

三、常用组件说明

Router 组件：

• 包裹整个应用，一个 React 应用只需要使用一次
• 两种常用 Router：HashRouter 和 BrowserRouter
• HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first）
• （推荐）BrowserRouter：使用 H5 的 history API 实现（localhost:3000/first）

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// import { HashRouter as Router, Route, Link } from 'react-router-dom'
1
2

Link 组件：

用于指定导航链接（a 标签）

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

Routes 组件：

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

// path属性：路由规则
// component属性：展示的组件
// Route组件写在哪，渲染出来的组件就展示在哪
{/*  指定路由出口 */}
      <Routes>
        <Route path="/first" element={<First></First>} />
      </Routes>
1
2
3
4
5
6
7

四、路由的执行过程

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

五、编程式导航

react router 5

• 场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？
• 编程式导航：通过 JS 代码来实现页面跳转
• history 是 React 路由提供的，用于获取浏览器历史记录的相关信息
• push(path)：跳转到某个页面，参数 path 表示要跳转的路径
• go(n)： 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）

class Login extends Component {
  handleLogin = () => {
    // ...
    this.props.history.push('/home')
  }
  render() { }
}
1
2
3
4
5
6
7

编程式导航是使用路由组件 this.props.history 提供的 API 进行路由跳转：

this.props.history.push(path, state)
this.props.history.replace(path, state)
this.props.history.goForward()
this.props.history.goBack()
this.props.history.go(n)
1
2
3
4
5

// 编程式导航传参
this.props.history.push(`/home/message/detail/${id}/${title}`)
this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
this.props.history.push(`/home/message/detail`, { id: id, title: title })
1
2
3
4

withRouter 的使用

withRouter 的作用：加工一般组件，让其拥有路由组件的 API ，如 this.props.history.push 等。

import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'

class Header extends Component {
  ...
}

export default withRouter(Header)
1
2
3
4
5
6
7
8

react router 6

useNavigate() 编程式路由导航

useNavigate() 返回一个函数，调用该函数实现编程式路由导航。函数有两种参数传递方式。

可以使用navigate这个函数代替this.history.push、this.history.replace、this.history.gofoward、this.history.goback、this.history.go

• 第一种方式传递两个参数：路由和相关参数。参数只能设置 replace 和 state。想要传递 params 和 search 参数直接在路由带上。

• 第二种方式传递数字，代表前进或后退几步。

import { BrowserRouter as Router, Route, NavLink, Routes, useNavigate } from 'react-router-dom'
1

六、默认路由 /

• 问题：现在的路由都是点击导航菜单后展示的，如何在进入页面的时候就展示呢？
• 默认路由：表示进入页面时就会匹配的路由
• 默认路由path为：/