實(shí)際開發(fā)中，React應(yīng)用常見問題【持續(xù)更新中】
實(shí)際開發(fā)中，React應(yīng)用常見問題【持續(xù)更新中】
一、路由相關(guān)
“react-router-dom”: “^6.14.2”, “react”: “^18.2.0”,文章來源：http://www.zghlxwxcb.cn/news/detail-615248.html
1、監(jiān)聽路由
import { useLocation } from 'react-router-dom'
export default function AppHeader() {
const [selectMenu, setSelectMenu] = useState<string>('')
const location = useLocation()
useEffect(() => {
// location: 頁面刷新 和 路徑變化【觸發(fā)路由】 都會(huì)監(jiān)聽到
// 解決頁面刷新或者是用戶手動(dòng)輸入路徑時(shí), 路徑和menu選中狀態(tài)不匹配的問題
setSelectMenu(location.pathname)
}, [location])
return <>test</>
}
2、路由編程式導(dǎo)航
useNavigate()文章來源地址http://www.zghlxwxcb.cn/news/detail-615248.html
import { useNavigate } from 'react-router-dom'
export default function AppHeader() {
const navigate = useNavigate()
const toOtherPageByPath = () => {
// 未攜帶參數(shù)的編程式導(dǎo)航
navigate(路由path)
}
return (
<>
<button onClick={toOtherPageByPath}>test</button>
</>
)
3、路由鏈接導(dǎo)航
import { Link } from 'react-router-dom'
<Link to={'路徑'}>Back Home</Link>
到了這里，關(guān)于實(shí)際開發(fā)中，React應(yīng)用常見問題【持續(xù)更新中】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
