react實(shí)現(xiàn)路由攔截的示例代碼
更新時(shí)間：2024年02月19日 10:35:37 作者：Goat惡霸詹姆斯
這篇文章主要介紹react實(shí)現(xiàn)路由攔截的,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
簡(jiǎn)單介紹下項(xiàng)目背景，我這里做了一個(gè)demo，前端使用mock數(shù)據(jù)，然后實(shí)現(xiàn)簡(jiǎn)單的路由攔截，校驗(yàn)session是否包含用戶作為已登錄的依據(jù)，react-router-dom是v6。不像vue可以設(shè)置登錄攔截beforeenter，react需要我們自己加。
//router.js
import React, { lazy } from "react";
import { Navigate } from 'react-router-dom'
const Error = lazy(() => import("@/pages/Error/Error.jsx"))
const Index = lazy(() => import("@/pages/Index/Index.jsx"))
const Login = lazy(() => import("@/pages/Login/Login.jsx"))
export const routes = [
{
path: "/",
element: <Navigate to="/index"/>
},
{
path: "/login",
element: <Login />
},
{
path: "/index",
element: <Index />
},
{
path: "*",
element: <Error />
},
]import React, { useEffect, Suspense } from 'react'
import { useRoutes, useNavigate } from 'react-router-dom'
import { routes } from './router'
export default function Index() {
const element = useRoutes(routes)
return (
<Authen route={element} children={element.children}>
<Suspense>
<div>{element}</div>
</Suspense>
</Authen>
)
}
//實(shí)現(xiàn)路由攔截
const Authen = (props) => {
const navigate = useNavigate()
const { route, children } = props
const username = sessionStorage.getItem('username')
console.log(props);
useEffect(() => {
if (route.props.match.pathname === "/login" && username) {
navigate('/index')
}
}, [route, navigate,username])
return children
}
Surpense組件是react組件懶加載的時(shí)候，路由跳轉(zhuǎn)了，由于網(wǎng)絡(luò)原因，組件內(nèi)容無(wú)法及時(shí)過(guò)去，不添加會(huì)報(bào)錯(cuò)。
到此這篇關(guān)于react實(shí)現(xiàn)路由攔截的示例代碼的文章就介紹到這了,更多相關(guān)react路由攔截內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React合成事件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-05-05
state狀態(tài)是組件實(shí)例對(duì)象身上的狀態(tài)，不是組件類(lèi)本身身上的，是由這個(gè)類(lèi)締造的實(shí)例身上的。這篇文章主要介紹了React 對(duì)state的理解,需要的朋友可以參考下2021-09-09
react 原生實(shí)現(xiàn)頭像滾動(dòng)播放的示例
這篇文章主要介紹了react 原生實(shí)現(xiàn)頭像滾動(dòng)播放的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
本文主要介紹了React配置子路由的實(shí)現(xiàn)，我們來(lái)通過(guò)一個(gè)簡(jiǎn)單的例子解釋一下如何配置子路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了淺談React之狀態(tài)(State)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了react基于mobx封裝管理用戶登錄的store,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
electron其實(shí)是一個(gè)桌面應(yīng)用程序，不是一個(gè)標(biāo)準(zhǔn)的前端web程序，所有沒(méi)有什么請(qǐng)求的發(fā)生，控制臺(tái)network看不到請(qǐng)求，而是只能通過(guò)console.log去打印查看，而且通信協(xié)議使用的不是http而是gRPC協(xié)議，這篇文章主要介紹了Electron+React如何進(jìn)行通信,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了淺談react性能優(yōu)化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
React中的useState如何改變值不重新渲染的問(wèn)題
這篇文章主要介紹了React中的useState如何改變值不重新渲染的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Yarn安裝項(xiàng)目依賴(lài)報(bào)error?An?unexpected?error?occurred:?“XXXXX：E
這篇文章主要為大家介紹了Yarn安裝項(xiàng)目依賴(lài)報(bào)error?An?unexpected?error?occurred:?“XXXXX：ESOCKETTIMEOUT”問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03