react項(xiàng)目中如何使用插件配置路由

本篇內(nèi)容介紹了“react項(xiàng)目中如何使用插件配置路由”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

react路由中沒有安全守衛(wèi)

推薦使用插件完成

react-router-waiter

網(wǎng)址

https://www.npmjs.com/search?q=react-router-waiter

react-router v6 路由統(tǒng)一管理 及 路由攔截方案。

安裝

cnpm i --save-dev react-router-waiter
"react-router-waiter": "^1.1.7",

用法

//引入路由
import { BrowserRouter as Router } from "react-router-dom";
//封裝了內(nèi)部的Routes組件
import RouterView from "react-router-waiter";
//引入路由配置和守衛(wèi)
import { routes, beforeRouter } from "./router/index";
export default () => {
return (
<>
<Router>
<RouterView routes={routes} onRouteBefore={beforeRouter}></RouterView>
</Router>
</>
);
};

react-router-waiter組件提供了Routes和onrouterbefore API

1.Routes 路由配置

2.onRouteBefore 路由前置守衛(wèi)

//創(chuàng)建路由配置
export const routes = [];
 
//創(chuàng)建路由前置守衛(wèi)
export const beforeRouter = () => {};

路由配置列表

//創(chuàng)建路由配置
//引入同步組件
import Index from "../views/Index";
import Login from "../views/Login";
import NotFound from "../views/Not-found";
//component屬性使用()=>import
//element 同步
export const routes = [
{
path: "/admin",
element: <Index />,
meta: {
name: "系統(tǒng)首頁",
},
},
{
path: "/login",
element: <Login />,
},
{
path: "/not-found",
element: <NotFound />,
},
{
path: "/",
redirect: "/admin",
},
{
path: "*",
redirect: "/not-found",
},
];
//react項(xiàng)目中配置 同步路由組件
component屬性換位 element屬性 走同步
 
//如果組件使用異步載入 使用component
//創(chuàng)建路由配置
//引入同步組件
import Index from "../views/Index";
import Login from "../views/Login";
import NotFound from "../views/Not-found";
//component屬性使用()=>import
//element 同步
export const routes = [
{
path: "/admin",
component: () => import("../views/Index"),
meta: {
name: "系統(tǒng)首頁",
},
},
{
path: "/login",
component: () => import("../views/Login"),
},
{
path: "/not-found",
component: () => import("../views/Not-found"),
},
{
path: "/",
redirect: "/admin",
},
{
path: "*",
redirect: "/not-found",
},
]
 
//()=>import(“***”)
//底層 React.lazy(()=>import(""));

二級(jí)子路由配置

{
path: '/',
element: <PageLayout />, // 父級(jí)的公共組件使用element配置
children: [
... // 子級(jí)可以繼續(xù)使用component配置
]
},

二級(jí)路由寫法

{
path: "/admin",
// element: <Index />,
component: () => import("../views/Index"),
children: [
{
path: "index",
component: () => import("../views/children/Index"),
},
{
path: "user",
component: () => import("../views/children/User"),
},
],
meta: {
name: "系統(tǒng)首頁",
},
},
//使用該插件避免閃屏
//建議父級(jí)同步 子集懶加載
{
path: "/admin",
element: <Index />,
children: [
{
path: "index",
component: () => import("../views/children/Index"),
},
{
path: "user",
component: () => import("../views/children/User"),
},
],
meta: {
name: "系統(tǒng)首頁",
},
},

路由守衛(wèi)

/**
* @param {string} pathname 當(dāng)前路由路徑
* @param {object} meta 當(dāng)前路由自定義meta字段
* @return {string} 需要跳轉(zhuǎn)到其他頁時(shí)，就返回一個(gè)該頁的path路徑，或返回resolve該路徑的promise對(duì)象
*/
const onRouteBefore = ({ pathname, meta }) => {
// 示例：動(dòng)態(tài)修改頁面title
if (meta.title !== undefined) {
document.title = meta.title
}
// 示例：判斷未登錄跳轉(zhuǎn)登錄頁
if (meta.needLogin) {
if (!isLogin) {
return '/login'
}
}
}
 
export default onRouteBefore

使用守衛(wèi)做登錄認(rèn)證

//創(chuàng)建路由前置守衛(wèi)
export const beforeRouter = ({ pathname, meta }) => {
console.log(pathname, meta);
//檢測(cè)用戶是否登錄
let token = localStorage.getItem("_token");
console.log(token);
if (token) {
if (pathname == "/login") {
return "/admin";
}
} else {
return "/login";
}
};

狀態(tài)機(jī)redux

中文文檔

https://www.redux.org.cn/

Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。

redux由來

Redux 由 Flux 演變而來

如何使用redux

安裝redux

npm install --save redux

附加包

npm install --save react-redux
npm install --save-dev redux-devtools

redux不是react內(nèi)置庫屬于第三方庫文件。

項(xiàng)目中使用redux庫

安裝redux
"redux": "^4.2.1",

main.js直接使用redux

//操作redux
//1.引入redux redux插件使用的是單暴漏模式 不是export default
//2.解出API 18里面使用legacy_createStore 之前使用createstore API
//3.使用api 創(chuàng)建唯一store(store對(duì)象) 唯一是整個(gè)項(xiàng)目就這一個(gè)store對(duì)象
import { legacy_createStore } from "redux";
//4.創(chuàng)建store對(duì)象 參數(shù)必填 reducer 函數(shù)
const store = legacy_createStore();
console.log(store);

定義reducer函數(shù)，創(chuàng)建store對(duì)象

import { legacy_createStore } from "redux";
//4.創(chuàng)建store對(duì)象 參數(shù)必填 reducer 函數(shù)
//5.定義reducer 函數(shù)
function reducer() {}
const store = legacy_createStore(reducer);
console.log(store);

創(chuàng)建store對(duì)象調(diào)用createStore API 默認(rèn)執(zhí)行reducer函數(shù)

function reducer() {
console.log("測(cè)試");
}
const store = legacy_createStore(reducer);
console.log(store);

默認(rèn)執(zhí)行reducer的作用是，創(chuàng)建store執(zhí)行reducer獲取默認(rèn)的狀態(tài)值。

//action 為觸發(fā)的動(dòng)作指令
function reducer(state, action) {
console.log("測(cè)試", state, action);
}
const store = legacy_createStore(reducer);
console.log(store);
//redux底層執(zhí)行動(dòng)作
{type: '@@redux/INITt.0.e.r.j.b'} 執(zhí)行該動(dòng)作執(zhí)行reducer獲取默認(rèn)值。

state設(shè)置初始狀態(tài)值

//定義初始化狀態(tài)
let initialState = {
count: 0,
isShow: false,
};
//reducer形參
//state狀態(tài)值
//action 為觸發(fā)的動(dòng)作指令
function reducer(state = initialState, action) {
console.log("測(cè)試", state, action);
return state;
}
const store = legacy_createStore(reducer);
//獲取store state狀態(tài)值
console.log(store.getState());

使用dispatch觸發(fā)action執(zhí)行reducer修改state狀態(tài)值

dispatch: ƒ dispatch(action)

//錯(cuò)誤寫法store.dispatch("INCREMENT");

dispatch({type:"動(dòng)作"})

import { legacy_createStore } from "redux";
//4.創(chuàng)建store對(duì)象 參數(shù)必填 reducer 函數(shù)
//5.定義reducer 函數(shù)
 
//定義初始化狀態(tài)
let initialState = {
count: 0,
isShow: false,
};
//reducer形參
//state狀態(tài)值
//action 為觸發(fā)的動(dòng)作指令
function reducer(state = initialState, action) {
//獲取action type
let { type } = action;
switch (type) {
case "INCREMENT":
state.count++;
return state;
 
default:
return state;
}
}
const store = legacy_createStore(reducer);
//獲取store state狀態(tài)值
console.log(store, store.getState());
//使用store對(duì)象api 執(zhí)行動(dòng)作觸發(fā)修改state狀態(tài)值
store.dispatch({ type: "INCREMENT" });
console.log(store.getState());

redux工作流程

redux和React關(guān)聯(lián)

使用附加包
npm install --save react-redux
"react-redux": "^8.0.5",

項(xiàng)目中用法：

//引入react-redux
//Provider reactredux內(nèi)置組件限定范圍傳值
import { Provider } from "react-redux";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
{/* 將store對(duì)象關(guān)聯(lián)到整個(gè)react項(xiàng)目 */}
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);

關(guān)聯(lián)之后函數(shù)組件中使用方案

//引入react-redux
//useDispatch dispatch 觸發(fā)action
//useSelector getState獲取狀態(tài)值
import { useDispatch, useSelector } from "react-redux";
export default () => {
return <>系統(tǒng)首頁</>;
};
 
//函數(shù)組件使用使用react-redux hook 完成狀態(tài)值修改
//引入react-redux
//useDispatch dispatch 觸發(fā)action
//useSelector getState獲取狀態(tài)值
import { useDispatch, useSelector } from "react-redux";
export default () => {
//獲取store狀態(tài)值
let { count } = useSelector((state) => state);
let dispatch = useDispatch();
let increment = () => {
dispatch({ type: "INCREMENT" });
};
let decrement = () => {
dispatch({ type: "DECREMENT" });
};
return (
<>
系統(tǒng)首頁-{count}
<button onClick={increment}>++</button>
<button onClick={decrement}>--</button>
</>
);
};

存在一個(gè)問題，state狀態(tài)值更新界面沒有更新

原因試store對(duì)象中監(jiān)聽不到state對(duì)象變更

修改在reducer中修改完成state狀態(tài)值之后需要斷鏈
return { ...state };
return Object.assign({}, state);

“react項(xiàng)目中如何使用插件配置路由”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！