技术标签： react-router-watcher react路由监听 前端 react React
我们有时候会遇到这种业务场景： 进入某个页面时，我们需要验证用户是否已经登陆，是否拥有足够权限？我们可以通过监听路由的变化来实现。但是在react下，怎么实现呢？
下面讨论实现过程：
使用Hook方式实现：
import {
useEffect, useState, useRef, useCallback, useMemo } from 'react'
import {
useLocation, useHistory, useRouteMatch } from 'react-router'
const useWatcher = () => {
const location = useLocation()
const history = useHistory()
const match = useRouteMatch()
const [pathname, setPathname] = useState('')
const listeners = useRef([])
const addListener = useCallback((listener) => {
listeners.current.push(listener)
}, [])
const removeListener = useCallback((listener) => {
const index = listeners.current.findIndex(item => item === listener)
if (index >= 0) {
listeners.current.splice(index, 1)
}
}, [])
const execListeners = useCallback(() => {
listeners.current.forEach(func => {
func({
history,
match,
location
})
})
}, [history, match, location])
useEffect(() => {
if (pathname !== location.pathname) {
execListeners()
setPathname(pathname)
}
}, [location, execListeners, pathname])
const watcher = useMemo(() => {
return {
removeListener, addListener
}
}, [removeListener, addListener])
return watcher
}
export default useWatcher
使用react类实现：
import React, {
Component } from 'react'
import {
withRouter 文章浏览阅读1.5k次，点赞5次，收藏9次。分享下自己改进的一个lora训练脚本，在ubuntu下如果SD-WEBUI的环境已经搭好的话，只需要下载lora-script就可以支持训练了，直接命令行方式训练_lora-scripts
文章浏览阅读1.8k次。每个Android应用都需要一个名为AndroidManifest.xml的程序清单文件，这个清单文件名是固定的并且放在每个Android应用的根目录下。它定义了该应用对于Android系统来说一些非常重要的信息。Android系统需要这些信息才能正常运行该应用。Android程序清单文件主要具有下面作用：· 它给应用程序Java包命名，这个包名作为应用程序唯一标识符。_清单文件的哪一节指定当用户尝试获取未缓存文件时将执行的任务
文章浏览阅读3.7k次。使用Timer执行定时任务很简单，一般这样子写： Timer timer = new Timer(); TimerTask task = new TimerTask() { @Override public void run() { System.out.println("hel_java timer自己会丢失吗
文章浏览阅读1.7k次，点赞4次，收藏14次。【何为三门问题？】三门问题（Monty Hall problem）亦称为蒙提霍尔问题、蒙特霍问题或蒙提霍尔悖论，大致出自美国的电视游戏节目Let’s Make a Deal。问题名字来自该节目的主持人蒙提·霍尔（Monty Hall）。参赛者会看见三扇关闭了的门，其中一扇的后面有一辆汽车，选中后面有车的那扇门可赢得该汽车，另外两扇门后面则各藏有一只山羊。当参赛者选定了一扇门，但未去开启它的时候，..._n次蒙提霍尔问题matlab
文章浏览阅读2.2k次。转自http://blog.csdn.net/forandever/article/details/5983846当使用System.loadLibrary()调用 Dll，两种方法:1.设定环境变量。比如：所编辑的Dll在目录“D:/cppProjects/nativecode/release”内，将这个路径复制添加到电脑的环境变量中的path变量内即可。2.设定项目属性。(开发推荐)右击项目名..._java system.loadlibrary
文章浏览阅读351次。摘 要原标题："小米随身wifi怎么用 小米随身wifi设置图文教程"相关路由器设置经验分享。 - 来源:路由器之家作为小米送给米粉们的新年“礼物”——小米"原标题："小米随身wifi怎么用 小米随身wifi设置图文教程"相关路由器设置经验分享。 - 来源:【路由器之家】作为小米送给米粉们的新年“礼物”——小米随身wifi在12月25日发布，这是一款同360随身wifi、小度wifi一样的硬件设备..._linux 小米随身wifi
文章浏览阅读8.2k次。最近很多观众老爷在苦觅关于启动项设置的解答，今天钦编为大家综合5条解答来给大家解开疑惑！ 有98%玩家认为启动项设置_服务器开机启动项值得一读！启动项设置1.如何在bios设置硬盘为第一启动项详细步骤根据BIOS分类的不同操作不同：一、AMI BIOS 或Phoenix BIOS 通用设置1、以联想机型为例，启动时按Del或F1进入BIOS，切换到Boot界面，选择1st Boot Device回..._服务器bios启动项设置
文章浏览阅读116次。受制裁影响，华为手机的市场份额不断下滑。根据最新的数据，2021年1月，华为手机在国内的市场份额不低OPPO和vivo，仅名列第三。虽然困难重重，华为却未停止往前走的脚步，还开除了几名在网上声称“华为要出售手机业务”的内部员工。华为官方已经确认，新款手机还会正常发布，按照发布节奏，上半年的旗舰—P50系列已经离我们是越来越近了。P50系列除了会带来更加出色的拍照，还有一大绝招，那就有可能会首发鸿蒙..._鸿蒙手机版正式上线
文章浏览阅读1.6w次，点赞2次，收藏12次。默认情况下，在哪个文件夹下运行npm，npm就在当前目录创建一个文件夹node_modules,然后将要安装的程序安装到文件夹node_modules里面，这样我很不习惯哈。。。所以让我们给它设置一个默认位置吧!// 设置npm安装程序时的默认位置npm config set prefix “C:\Users\Default\AppData\Roaming\npm\node_modules”..._npm默认路径
文章浏览阅读512次。1. 简介利用训练好的 shape_predictor_68_face_landmarks.dat(人脸 68 点特征检测器),进行人脸面部轮廓特征的提取。下载地址：http://dlib.net/files/shape_predictor_68_face_landmarks.dat.bz22. 代码 face_landmark_detector_remark.py# -*-..._shape_predictor_68_face_landmarks
文章浏览阅读9.2k次，点赞9次，收藏41次。三维空间中向量的旋转_三维向量旋转
文章浏览阅读1.4w次，点赞6次，收藏43次。虚拟现实技术：三维立体显示案例实现目录虚拟现实技术：三维立体显示案例实现案例一：matlab 绘制三维图并标注每个点的坐标1.前言2.代码实现案例二：matlab 绘制三维曲面的函数1.mesh函数2.surf函数3.两者调用格式差不多4.比较mesh、surf的区别案例一：matlab 绘制三维图并标注每个点的坐标1.前言基本原理是先绘制三维图，通过plot3，然后通过text函数在每个点标注出坐标，但由于点的数量多，标注会比较密集，不一定看得清楚，可以适当减少标注的点数来提高清晰度。2.代码实_matlab建立三维坐标系