react router 路由守卫_react实现hash路由
众所周知,目前单页面使用的路由有两种实现方式:
- hash 模式
- history 模式
hash 模式
路由原理:
我们先来看hash模式,页面首次加载时需要在load事件中解析初始的URL,从而展示进入的页面。当 # 后面的哈希值发生变化时,不会向服务器请求数据,可以通过 hashchange 事件来监听到 URL 的变化,从而进行跳转页面。
react代码实现:
1、使用react脚手架构建一个react的项目:
>npx creact-react-app my-app
2、创建两个组件 home.js 、 setting.js,使用hash路由来实现两个组件的切换。
项目目录如下:
3、在App.js文件中,我们需要实现如下的效果:
import React from 'react'import Home from './pages/home'import Setting from './pages/setting'import {Router, Route, Link} from './router'export default function App() { return ( 首页 设置 )}
整个结构使用Router组件包裹,由Route组件承载每一项路由的组件,由Link标签实现切换。那么我们来看一下router内部如何实现的。
4、先来看一下router文件夹的结构:
组件Router,Route,Link在router/Route.js,router/Route.js,route/Link.js三个文件中实现。router/index.js将三个组件集成方便外部调用。来看一下index.js的内容:
export {default as Router} from './Router'export {default as Route} from './Route'export {default as Link} from './Link'
5、整个路由项目被Router标签包裹,实际上需要达到共享路由当前地址的目的,借助react中的 context 来实现。同时Router组件需要在项目首次加载时解析当前的hash值,并且监听hash值的变化,根据hash值,来通知 children 当前的路由地址。代码如下:
import React, { Component, createContext } from "react";// 用于共享路由当前hash地址export const RouterContext = createContext();export default class Router extends Component { state = { path: "/",//路由当前hash地址 }; // 解析hash地址 getPath() { let path = window.location.hash; if (path) { path = path.replace("#", ""); } else { path = "/"; } this.setState({ path }); } componentDidMount() { // 先解析第一次的hash值 this.getPath(); // 监听之后hash值的变化,进入路由和返回 window.onhashchange = (ev) => { this.getPath(); }; } render() { // 使用context共享路由当前hash地址 return ( {this.props.children} ); }}
6、Route组件是根据当前的hash地址判断当前的Route承载的组件是否应该显示,代码如下:
import React, {useContext} from 'react'import {RouterContext} from './Router'export default function Route(props) { //获得当前hash地址 const context = useContext(RouterContext); return ( //当前的hash地址和组件配置的地址比较,相等就进入路由对应的组件,不想等则不显示组件。 context.path === props.path ? : null );}
注:如果需要实现路由嵌套和动态路由,当前的hash地址和组件配置的地址比较就不是使用===判断这么简单了,在这里我不做陈述,感兴趣的话可以自己研究一下。
7、Link组件只需要触发hash路由的切换。代码如下:
import React from 'react'export default function Link({to, children}) { //Link组件实现hash路由的切换,故只需要通过a标签切换hash值 return ( {children} )}
8、最后,我们来看一下显示效果:
history 模式的实现,详见下回分解~
react router 路由守卫_react实现hash路由相关推荐
- 全局路由守卫,独享路由守卫,组件内路由守卫
路由守卫: 1.作用:对路由进行权限控制 2.分类:全局路由守卫,独享路由守卫,组件内路由守卫 3.全局路由守卫:在router=>index.js const routes =[ {path: ...
- react实现路由跳转_react实现hash路由
众所周知,目前单页面使用的路由有两种实现方式: hash 模式 history 模式 hash 模式 路由原理: 我们先来看hash模式,页面首次加载时需要在load事件中解析初始的URL,从而展示进 ...
- 前置路由守卫和后置路由守卫
路由跳转之前, 会触发的一个函数 叫前置路由守卫 语法:router.beforeEach((to, from, next) => {这里可以写路径的跳转判断/有无token值的情况分析}) 作 ...
- vue3设置路由守卫基于token进行路由导航和退出
在某些时候,用户没有登录的情况下我们不允许用户访问以下特定的页面,此时我们需要用到路由守卫来实现. 在router下的index.js中的相应位置设置守卫函数,将守卫函数挂载到router的钩子bef ...
- 路由的前置路由守卫和后置路由守卫
afterEach beforeEach这两个导航守卫的区别 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组 ...
- Vue Router路由守卫
全局前置.后置路由守卫 router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import List f ...
- vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
- 路由守卫(全局守卫,局部守卫,组件内守卫)
路由守卫 作用:对路由进行权限控制 分类:全局守卫.独享守卫.组件内守卫 全局守卫: //全局前置守卫:初始化时执行.每次路由切换前执行 router.beforeEach((to,from,next ...
- vue-router 源码解析(三)-实现路由守卫
文章目录 基本使用 导语 初始化路由守卫 useCallbacks 发布订阅模式管理路由守卫 push 开始导航 resolve返回路由记录匹配结果 navigate 开始守卫 路由守卫前置方法 抽取 ...
最新文章
- 虚拟服务器的运行原理,虚拟机复制的工作原理
- 腾讯首次发布 AI 白皮书讲了什么?
- python可以干什么-学了Python可以用来干什么呢?
- Python 微信机器人-用itchat库下载微信接收到的语音、图片等资源实例演示
- CentOS 初体验十二:wget下载文件
- HTML CSS简介与图片映射
- React 实现一个漂亮的 Table
- 通过JavaFX标注制作动画效果
- 基于动态混合高斯模型的商品价格模型算法
- python生成随机数random操作_Python random生成随机数示例
- 设计模式(三)结构型模式
- 威纶通触摸屏与仪表通讯_威纶通触摸屏与英威腾变频器通信详解
- 企业私有云资源规划及设计
- cesium雷达图_cesium添加闪烁点,雷达图(一般用于预警)
- Ambarella : 一家伟大的视频压缩处理芯片厂商
- Planned Contrasts and Post hoc Tests 多重检验校正
- pdf批量修改属性工具软件使用教程
- 以太坊经典的现状- Anthony Lusardi
- 几种常见窗函数的特性
- Linux中netstat -anp命令