实际开发中,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>
相关推荐
abigale031 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络8 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码