实际开发中,React应用常见问题【持续更新中】

实际开发中,React应用常见问题【持续更新中】

实际开发中,React应用常见问题【持续更新中】

一、路由相关

"react-router-dom": "^6.14.2", "react": "^18.2.0",

1、监听路由

ts 复制代码
import { useLocation } from 'react-router-dom'

export default function AppHeader() {
  const [selectMenu, setSelectMenu] = useState<string>('')
  const location = useLocation()
  useEffect(() => {
    // location: 页面刷新 和 路径变化【触发路由】 都会监听到
    // 解决页面刷新或者是用户手动输入路径时, 路径和menu选中状态不匹配的问题
    setSelectMenu(location.pathname)
  }, [location])
  return <>test</>
}

2、路由编程式导航

useNavigate()

ts 复制代码
import { useNavigate } from 'react-router-dom'


export default function AppHeader() {

  const navigate = useNavigate()
  const toOtherPageByPath = () => {
  	// 未携带参数的编程式导航
    navigate(路由path)
  }
  return (
    <>
    	<button onClick={toOtherPageByPath}>test</button>
    </>
  )

3、路由链接导航

ts 复制代码
import { Link } from 'react-router-dom'
<Link to={'路径'}>Back Home</Link>
相关推荐
科技探秘人7 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人7 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR13 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香15 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969317 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai23 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc27 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91532 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress