实际开发中,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>
相关推荐
dasseinzumtode7 分钟前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰10 分钟前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss11 分钟前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship14 分钟前
网页截图API-Npm工具包分享
前端
Jedi Hongbin26 分钟前
Three.js shader内置矩阵注入
前端·javascript·three.js
etcix26 分钟前
dmenux.c: integrate dmenu project as one file
c语言·前端·算法
光影少年39 分钟前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
超人不会飛42 分钟前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
じòぴé南冸じょうげん43 分钟前
微信小程序如何进行分包处理?
前端·小程序
Jolyne_1 小时前
Table自定义单元格渲染分享
前端