ReactHook 实现监听路由
前言
在开发过程中我们往往会遇到像首页导航栏的需求,然而普通的依靠下标控制导航栏状态无法长久保持状态,用户一刷新就会导致标题栏又回到默认状态。
那么该怎么办呢?
我们可以使用监听路由的方式来完成导航栏的状态持久化。
在了解监听路由前我们先了解一下react-route的钩子函数
一、react-router-dom的钩子函数
react的路由钩子函数主要有四种:useHistory
useLocation
useParams
useRouteMatch
但是使用这些钩子函数React版本必须>= 16.8
二、useLocation()
此钩子可以返回location表示当前URL对象
import React, { useEffect } from 'react'
import { useLocation } from 'react-router-dom';
function MyComponent() {
const location = useLocation();
useEffect(()=>{
console.log(location)
/* 结果:
{pathname: "/", search: "", hash: "", state: null, key: "t061zail"}
hash: ""
key: "t061zail"
pathname: "/"
search: ""
state: null
[[Prototype]]: Object
*/
},[location])
}
三、实际案例
我们通过绑定动态class和监听路由实现持久化的标题栏
怎么配置路由,本文不做过多介绍。
组件:
//引入工具
import React, { memo, useState, useEffect } from 'react'
import { NavLink, useLocation } from "react-router-dom";
// 引入css
import './style.less'
const ZZZAppHeader = memo(() => {
// 根据index激活class
const [linkIndex, setLinkIndex] = useState(null)
// 监听路径
const { pathname } = useLocation()
// 导航栏列表
const linkList = [
{title:'首页',path:'/'},
{title:'介绍',path:'/character'},
{title:'新闻',path:'/news'},
{title:'设定',path:'/world'},
]
// 选中工具
const switchLocation = (_pathname) => {
switch (_pathname) {
case '/':
setLinkIndex(0)
break;
case '/character':
setLinkIndex(1)
break;
case '/news':
setLinkIndex(2)
break;
case '/world':
setLinkIndex(3)
break;
default:
setLinkIndex(0)
break;
}
}
useEffect(() => {
// console.log(linkIndex);
switchLocation(pathname)
}, [pathname, linkIndex])
return (
<header className='header'>
<div className='header__navbar'>
<div className='header__navbar-links'>
{
linkList.map((item,index) => {
return (
<NavLink key={index} className={`header__navbar-link ${index === linkIndex ? 'header__navbar-link--active':''}`} to={item.path}>{item.title}</NavLink>
)
})
}
</div>
</div>
</header>
)
})
export default ZZZAppHeader
css:
.header {
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 75px;
background-color: #000;
img {
width: 100%;
}
}
}
.header__navbar {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
white-space: nowrap;
.header__navbar-links {
display: flex;
align-items: center;
.header__navbar-link {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 1.24rem;
height: .44rem;
padding: 0 .1rem;
margin-left: .6rem;
font-size: .2rem;
font-weight: bold;
text-align: center;
color: #787878;
border-radius: 1.2rem;
cursor: pointer;
transform: scale(1);
transition: background 500ms, color 500ms, transform 500ms;
}
.header__navbar-link:hover,
.header__navbar-link--active {
background-color: #fff;
color: #000;
transform: scale(1.12);
}
}
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbfbba
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01