react項目中使用插件配置路由的方法
更新時間：2023年03月30日 10:01:56 作者：不想寫，還得寫，寫就寫，慢慢寫
這篇文章主要介紹了react項目中使用插件配置路由的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
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項目中配置 同步路由組件
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(""));
二級子路由配置
{
path: '/',
element: <PageLayout />, // 父級的公共組件使用element配置
children: [
... // 子級可以繼續(xù)使用component配置
]
},二級路由寫法
{
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)首頁",
},
},
//使用該插件避免閃屏
//建議父級同步 子集懶加載
{
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)到其他頁時，就返回一個該頁的path路徑，或返回resolve該路徑的promise對象
*/
const onRouteBefore = ({ pathname, meta }) => {
// 示例：動態(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);
//檢測用戶是否登錄
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ù)測化的狀態(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)置庫屬于第三方庫文件。
項目中使用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對象) 唯一是整個項目就這一個store對象
import { legacy_createStore } from "redux";
//4.創(chuàng)建store對象 參數(shù)必填 reducer 函數(shù)
const store = legacy_createStore();
console.log(store);
定義reducer函數(shù)，創(chuàng)建store對象
import { legacy_createStore } from "redux";
//4.創(chuàng)建store對象 參數(shù)必填 reducer 函數(shù)
//5.定義reducer 函數(shù)
function reducer() {}
const store = legacy_createStore(reducer);
console.log(store);
創(chuàng)建store對象調(diào)用createStore API 默認(rèn)執(zhí)行reducer函數(shù)
function reducer() {
console.log("測試");
}
const store = legacy_createStore(reducer);
console.log(store);
默認(rèn)執(zhí)行reducer的作用是，創(chuàng)建store執(zhí)行reducer獲取默認(rèn)的狀態(tài)值。
//action 為觸發(fā)的動作指令
function reducer(state, action) {
console.log("測試", state, action);
}
const store = legacy_createStore(reducer);
console.log(store);
//redux底層執(zhí)行動作
{type: '@@redux/INITt.0.e.r.j.b'} 執(zhí)行該動作執(zhí)行reducer獲取默認(rèn)值。state設(shè)置初始狀態(tài)值
//定義初始化狀態(tài)
let initialState = {
count: 0,
isShow: false,
};
//reducer形參
//state狀態(tài)值
//action 為觸發(fā)的動作指令
function reducer(state = initialState, action) {
console.log("測試", 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)
//錯誤寫法store.dispatch("INCREMENT");
dispatch({type:"動作"})
import { legacy_createStore } from "redux";
//4.創(chuàng)建store對象 參數(shù)必填 reducer 函數(shù)
//5.定義reducer 函數(shù)
//定義初始化狀態(tài)
let initialState = {
count: 0,
isShow: false,
};
//reducer形參
//state狀態(tài)值
//action 為觸發(fā)的動作指令
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對象api 執(zhí)行動作觸發(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",
項目中用法：
//引入react-redux
//Provider reactredux內(nèi)置組件限定范圍傳值
import { Provider } from "react-redux";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
{/* 將store對象關(guān)聯(lián)到整個react項目 */}
<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>
</>
);
};存在一個問題，state狀態(tài)值更新界面沒有更新
原因試store對象中監(jiān)聽不到state對象變更
修改在reducer中修改完成state狀態(tài)值之后需要斷鏈
return { ...state };
return Object.assign({}, state);到此這篇關(guān)于react項目中使用插件配置路由的文章就介紹到這了,更多相關(guān)react配置路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
隨著React應(yīng)用日益復(fù)雜,開發(fā)者需要借助模塊打包工具來管理項目依賴、轉(zhuǎn)換代碼和優(yōu)化性能,Webpack是一款功能強(qiáng)大的模塊打包器,它可以將React項目中的JavaScript、CSS、圖片等資源打包成瀏覽器友好的文件,本文將全面介紹如何使用Webpack打包React項目2025-03-03
要實現(xiàn)useState的背后原理,則需要深入了解狀態(tài)是如何在函數(shù)組件的渲染周期中保持和更新的,本文將通過一段代碼簡單闡述useState鉤子函數(shù)的實現(xiàn)思路,希望對大家有所幫助2023-12-12
這篇文章主要介紹了react-router 路由切換動畫的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2022-12-12
這篇文章主要為大家介紹了React可定制黑暗模式切換開關(guān)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react學(xué)習(xí)每天一個hooks?useWhyDidYouUpdate
這篇文章主要為大家介紹了react學(xué)習(xí)每天一個hooks?useWhyDidYouUpdate使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
本文主要介紹了React子組件調(diào)用父組件的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
這篇文章主要為大家介紹了React新文檔濫用effect出現(xiàn)的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個特定的算法函數(shù)，而是指在調(diào)和過程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法2021-12-12
在fiber出現(xiàn)之前，react的架構(gòu)體系只有協(xié)調(diào)器reconciler和渲染器render。當(dāng)前有新的update時，react會遞歸所有的vdom節(jié)點，如果dom節(jié)點過多，會導(dǎo)致其他事件影響滯后，造成卡頓。即之前的react版本無法中斷工作過程，一旦遞歸開始無法停留下來2023-02-02
這篇文章主要介紹了淺談箭頭函數(shù)寫法在ReactJs中的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08