React路由

Posted 2021-11-11 遥岑.

目录

• React路由概述
• 路由的基本使用
• • 基本使用
  • 常用组件
• 路由的执行过程
• 编程式导航
• 默认路由
• 匹配模式
• • 模糊匹配
  • 精确匹配

React路由概述

现在的前端应用大多都是SPA（单页应用程序），也就是只有一个html页面的应用程序，因为它的用户体验更好，对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。
前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。
前端路由是一套映射规则，在React中，是URL路径和组件的对应关系。
使用React路由来说，就是配置路径和组件（配对）。

路由的基本使用

基本使用

导入react-router-dom的核心组件

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

使用Router组件包裹整个应用

<Router>
	<div></div>
</Router>

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

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

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

<Route path='/first' component={First}></Route>

常用组件

Router组件：包裹整个应用，一个React应用只需要使用一次。
两种常用Router：HashRouter和BrowserRouter。

• HashRouter：使用URL的哈希值实现（localhost:8080/#/first）
• BrowserRouter：使用H5的historyAPI实现（localhost:8080/first）

Link组件：用于指定导航链接（a标签）。

• to属性(href)，浏览器地址栏里的pathname(location.pathname)

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

• path属性，路由规则
• component属性，展示的组件
• Route组件写在哪，渲染出来的组件就展示在哪

路由的执行过程

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

编程式导航

编程式导航：通过JS代码实现页面跳转。

const Login = (props)=> {
    const handle = ()=> {
        //跳转到首页
        props.history.push('/index')
    }
    return (
        <div>
            <h2>用户登录</h2>
            <button onClick={handle}>登录</button>
        </div>
    )
}

const Index = (props)=> {
    const Back = ()=> {
        //-1返回上一页
        props.history.go(-1)
    }
    return (
        <div>
            <h1>我是首页</h1>
            <button onClick={Back}>返回</button>
        </div>
    )
}

• history是React路由提供的，用于获取浏览器历史记录的相关信息
• push(path)：跳转到某个页面，参数path表示要跳转的路径
• go(n)：前进或后退到某个页面，参数n表示前进或后退页面数量（比如-1表示退回上一页）

默认路由

默认路由：进入页面时就会匹配的路由。
默认路由的path为/。

//默认路由
<Route path='/' component={Home}/>

匹配模式

模糊匹配

默认情况下，React路由是模糊匹配模式。
模糊匹配规则：只要pathname以path开头就会匹配成功。

精确匹配

给Route组件添加exact属性，让其变为精准匹配模式。
精准匹配：只有当path和pathname完全匹配时才会展示该路由。

<Route exact path='/index' component={Index}/>