实际开发中，React应用常见问题【持续更新中】
实际开发中，React应用常见问题【持续更新中】
一、路由相关
“react-router-dom”: “^6.14.2”, “react”: “^18.2.0”,文章来源：https://www.toymoban.com/news/detail-615248.html
1、监听路由
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()文章来源地址https://www.toymoban.com/news/detail-615248.html
import { useNavigate } from 'react-router-dom'
export default function AppHeader() {
const navigate = useNavigate()
const toOtherPageByPath = () => {
// 未携带参数的编程式导航
navigate(路由path)
}
return (
<>
<button onClick={toOtherPageByPath}>test</button>
</>
)
3、路由链接导航
import { Link } from 'react-router-dom'
<Link to={'路径'}>Back Home</Link>
到了这里，关于实际开发中，React应用常见问题【持续更新中】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
