React 路由学习总结 react-router-dom6+react-router-dom5

开题

单页面应用和多页面应用

SPA:单页面应用程序,整个应用中只有一个页面(index.html)
MPA:多页面应用程序,整个应用中有很多页面(*.html)

react路由

现在的前端应用大多都是SPA单页面应用程序,也就是一个HTML页面的应用程序。体验更好,对服务器的压力更小,更受欢迎,为了有效地使用单页面来管理原来多页面的功能,前端路由就此产生了,前端路由能让一个视图或页面导航到另一个视图或页面中。
前端路由是一套映射规整,在React中,是URL路径与组件的对应关系,使用React路由简单来说就是配置路径和组件。
React 路由学习总结 react-router-dom6+react-router-dom5_第1张图片
React 路由学习总结 react-router-dom6+react-router-dom5_第2张图片

react模拟hash路由的实现

实现原理:其实hash路由的原理是监听hashChange事件
hash值:http://localhost:3000/#/home

之后的部分就是hash值,有以下两个特点

  • hash值的变化(地址栏中改变了hash值再回车)不会重新发送请求,它不是请求路径的一部分。
  • hash值的变化会触发hashChange事件

思路:维护一个状态curHash

  • 当has变化(hashChange事件)时修改它。
  • 根据curHash的值来决定显示哪个组件。

实现一个hash路由

目录结构:
React 路由学习总结 react-router-dom6+react-router-dom5_第3张图片
index.js

import './App.css';
import {Routes, Route, NavLink, Navigate} from 'react-router-dom'
import Home from "./Home"
import List from "./List"
import User from "./User"
const App = () => {
  return (
    <div>
      {/* 声明式导航 */}
      <div>
        <NavLink end to="/home" state={{ id: 1000 }}>首页</NavLink>
        <span> --- </span>
        <NavLink to="/list">列表</NavLink>
        <span> --- </span>
        <NavLink to="/user">用户</NavLink>
      </div>
      <hr />
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/list' element={<List />} />
        <Route path='/user' element={<User />} />
        {/* 重定向 */}
        <Route path="/" element={<Navigate to="/home" replace={false} />} />
        {/* 404页面处理 */}
        <Route path="*" element={<div>404页面</div>} />
      </Routes>
    </div>
  )
}
export default App

效果
React 路由学习总结 react-router-dom6+react-router-dom5_第4张图片
React 路由学习总结 react-router-dom6+react-router-dom5_第5张图片
React 路由学习总结 react-router-dom6+react-router-dom5_第6张图片
React 路由学习总结 react-router-dom6+react-router-dom5_第7张图片

React路由使用的基本

我当前react18 + react-router-dom6.0版本。

react-router-dom5 与 react-router-dom6的区别

  1. 重命名为
  2. 的新特性变更component/render被element替代
  3. 嵌套路由变得更简单 a. Route children 已更改为接受子路由。
    b. 比Route exact 和 Route strict更简单的匹配规则。
    c. Route path 路径层次更清晰。
  4. 用 useNavigate 替代 useHistory
  5. 新钩子 useRoutes 替代 react-router-config

一、安装react-router-dome6.0

npm i react-router-dom@6

react-router-dom 提供了三个核心的组件,HashRouter,Route,Link

二、导入包并使用

使用HashRouter包裹整个应用,一个项目中自会有一个Router,index.js界面如下引入
React 路由学习总结 react-router-dom6+react-router-dom5_第8张图片

三、使用Link指定导航链接

使用Route指定路由规则,那个路径展示那个组件

核心代码:

import './App.css';
import {Routes, Route, NavLink,Link, Navigate} from 'react-router-dom'
import Home from "./Home"
import List from "./List"
import User from "./User"
const App = () => {
  return (
    <div>
      {/* 声明式导航 */}
      <div>
        <NavLink end to="/home" state={{ id: 1000 }}>首页</NavLink>
        <span> --- </span>
        <NavLink to="/list">列表</NavLink>
        <span> --- </span>
        <NavLink to="/user">用户</NavLink>
      </div>
      <hr />
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/list' element={<List />} />
        <Route path='/user' element={<User />} />
        {/* 重定向 */}
        <Route path="/" element={<Navigate to="/home" replace={false} />} />
        {/* 404页面处理 */}
        <Route path="*" element={<div>404页面</div>} />
      </Routes>
    </div>
  )
}
export default App

要点总结:

  1. Route组件必须在Router组件内部。
  2. NavLink,Link组件的to属性的值为点击后跳转的路径。
  3. Route组建的Path属性与Link标签的to属性匹配的。
  4. component属性标识Route组件匹配成功后渲染的对象。

路由三大对象之-Router

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

React 路由学习总结 react-router-dom6+react-router-dom5_第9张图片React 路由学习总结 react-router-dom6+react-router-dom5_第10张图片
或者另一种写法
React 路由学习总结 react-router-dom6+react-router-dom5_第11张图片
HashRouter:hash模式 http://localhost:3000/#/home。

原理:监听 window 的hashchange 事件来实现。

BrowserRouter:history模式,使用H5的history.pushState()API实现http://localhost:3000/home。

原理:监听 window 的popstate 事件来实现。

路由三大对象之-Link

Link组件、最终会渲染成标签,用于指定路由导航,to属性表示a标签的href属性,link组件无法暂时那个link处于选中状态。

格式:<Link to="/search">搜索</Link>

NavLink 组件、一个更特殊的Link组件,可以用用于指定当前导航高亮。to属性,用于指定地址,会渲染成a标签的href属性,activeClassName:用于指定高亮的类名,默认active,一般不做修改,exact精确匹配,标识必须地址栏和to的属性值精确匹配类名才生效

格式:<NavLink to="/search">搜索</NavLink>

ink和NavLink都用来做路由跳转。它们都用****属性来指定跳转地址,link和NavLink的区别是,NavLink指向的路径会自带一个名为
__的class类名。

使用NavLink实现高亮显示

引入app.css

.active{
  color: blue ;
}

app.js代码

import './App.css';
import {Routes, Route, NavLink, Navigate} from 'react-router-dom'
import Home from "./Home"
import List from "./List"
import User from "./User"
const isActive = ({isActive}) => isActive?'active':''
const App = () => {
  return (
    <div>
      {/* 声明式导航 */}
      <div>
        <NavLink to="/home" className={isActive}>首页</NavLink>
        <span> --- </span>
        <NavLink to="/list" className={isActive}>列表</NavLink>
        <span> --- </span>
        <NavLink to="/user">用户</NavLink>
      </div>
      <hr />
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/list' element={<List />} />
        <Route path='/user' element={<User />} />
        {/* 重定向 */}
        <Route path="/" element={<Navigate to="/home" replace={false} />} />
        {/* 404页面处理 */}
        <Route path="*" element={<div>404页面</div>} />
      </Routes>
    </div>
  )
}
export default App

效果:
React 路由学习总结 react-router-dom6+react-router-dom5_第12张图片

路由三大对象之-Route

route决定路由匹配规则:

	格式:<Route path="/xx/xx" component={组件}></Route>

匹配规则:

名词约定

  1. path :Route组件中path属性的值
  2. pathname:值得如下格式
        a. link组件中to的属性值
        b. 地址栏中的地址

模糊匹配规则

  1. 只要pathname以path开头就算匹配成功。
  2. 匹配成功就加载对应组件。
  3. 整个匹配过程是逐一匹配,一个匹配成功了,并不会停止匹配。

精确匹配规则

  1. 当pathname(link的to属性/地址栏url的pathname)和的path属性的值完全相同时,才能匹配成功
  2. 精确匹配的方式给Route组件添加exact属性

模糊匹配和精确匹配

  1. 默认是模糊匹配的
  2. 补充exact可以设置成精确匹配

React 路由学习总结 react-router-dom6+react-router-dom5_第13张图片

Switch / 404 / 重定向

Route组件匹配成功之后并不会停止,它可能会匹配多个组件。使用Switch组件,匹配第一个符合条件的Route,然后把一个无path的Route组件写在switch的最后一项,这样就能在匹配不到合适组件的时候,总能匹配到最后一个Route对应的组件。在switch组件下,不管有多少哥Route的路由规则匹配成功,都只会渲染第一个匹配的组件。在react-router-dom6
中 重命名为

处理404页

方法一、不设置path属性,将404页对应的路由放在switch内部的最后位置

	<Route element={<div>404页面</div>} />

方法二、

	<Route path="*" element={<div>404页面</div>} />

重定向

重定向到首页:如果你更倾向于将用户引导回首页,可以使用导航元素
将所有未匹配路由重定向到首页。

代码演示:

	<Route path="/" element={<Navigate to="/home" replace={false} />} />

编程式导航

react-router-dom 编程式路由导航 (v5)

1.push跳转+携带params参数

	props.history.push(`/b/child1/${id}/${title}`)

2.push跳转+携带search参数

	props.history.push(`/b/child1?id=${id}&title=${title}`)

3.push跳转+携带state参数

	props.history.push(`/b/child1`,{id,title})

4.replace跳转+携带params参数

	this.props.history.replace(`/home/message/detail/${id}/${title}`)

5.replace跳转+携带search参数

	this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

6.replace参数+携带跳转state参数

	this,props.history.replace(`/home/message/detail`,{id,title})

7.前进

	this.props.history.goForward()

8.回退

	this.props.history.goForward()

9.前进或回退

	this.props.history.go(-1)  辉瑞到前一条的路由

react-router-dom 编程式路由导航 (v6)

1.push跳转+携带params参数

navigate(`/b/child1/${id}/${title}`)

传递参数【http://localhost:3000/#/list/001/消息1】
React 路由学习总结 react-router-dom6+react-router-dom5_第14张图片
React 路由学习总结 react-router-dom6+react-router-dom5_第15张图片
接收:
React 路由学习总结 react-router-dom6+react-router-dom5_第16张图片
效果
React 路由学习总结 react-router-dom6+react-router-dom5_第17张图片

2.push跳转+携带search参数

navigate(`/b/child2?id=${id}&title=${title}`)

React 路由学习总结 react-router-dom6+react-router-dom5_第18张图片
React 路由学习总结 react-router-dom6+react-router-dom5_第19张图片
React 路由学习总结 react-router-dom6+react-router-dom5_第20张图片
效果:
React 路由学习总结 react-router-dom6+react-router-dom5_第21张图片

3.push跳转+携带state参数

navigate(`/b/child2`,{state:{id,title}})

路由不需要做任何添加
React 路由学习总结 react-router-dom6+react-router-dom5_第22张图片
navigate设置
React 路由学习总结 react-router-dom6+react-router-dom5_第23张图片
接收
React 路由学习总结 react-router-dom6+react-router-dom5_第24张图片
效果:
React 路由学习总结 react-router-dom6+react-router-dom5_第25张图片

4.replace跳转+携带params参数

navigate(`/b/child1/${id}/${title}`,{replace:true})

5.replace跳转+携带search参数

navigate(`/b/child2?id=${id}&title=${title}`,{replace:true})

6.replace跳转+携带state参数

navigate("/b/child2",{state:{id,title},replace:true})

React 路由学习总结 react-router-dom6+react-router-dom5_第26张图片

路由传参总结

1.params参数

路由链接(携带参数):详情
注册路由(声明接收):
接收参数:this.props.match.params

2.search参数

路由链接(携带参数):详情
注册路由(无需声明,正常注册即可):
接收参数:this.props.location.search
备注:获取到的search是urlencoded编码字符串,需要借助querystring解析

3.state参数

路由链接(携带参数):< Link> to={{pathname:‘/demo/test’,state:{name:‘tom’,age:18}}}>详情
注册路由(无需声明,正常注册即可):
接收参数:this.props.location.state
备注:刷新也可以保留住参数

4. 在写嵌套路时注意:

1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的
3.在写Redirect (重定向)时注意:一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect(重定向)指定的路由

完结~

你可能感兴趣的:(React,react.js,学习,前端,javascript,前端框架)