react项目中使用插件配置路由的方法

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

//引入路由 import { BrowserRouter as Router } from "react-router-dom"; //封装了内部的Routes组件 import RouterView from "react-router-waiter"; //引入路由配置和守卫 import { routes, beforeRouter } from "./router/index"; export default () => { return ( <>  ); };

//创建路由配置 export const routes = []; //创建路由前置守卫 export const beforeRouter = () => {};

//创建路由配置 //引入同步组件 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: , meta: { name: "系统首页", }, }, { path: "/login", element: , }, { path: "/not-found", element: , }, { path: "/", redirect: "/admin", }, { path: "*", redirect: "/not-found", }, ]; //react项目中配置 同步路由组件 component属性换位 element属性 走同步 //如果组件使用异步载入 使用component //创建路由配置 //引入同步组件 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: "系统首页", }, }, { 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: , // 父级的公共组件使用element配置 children: [ ... // 子级可以继续使用component配置 ] },

{ path: "/admin", // element: , component: () => import("../views/Index"), children: [ { path: "index", component: () => import("../views/children/Index"), }, { path: "user", component: () => import("../views/children/User"), }, ], meta: { name: "系统首页", }, }, //使用该插件避免闪屏 //建议父级同步 子集懒加载 { path: "/admin", element: , children: [ { path: "index", component: () => import("../views/children/Index"), }, { path: "user", component: () => import("../views/children/User"), }, ], meta: { name: "系统首页", }, }, 

/** * @param {string} pathname 当前路由路径 * @param {object} meta 当前路由自定义meta字段 * @return {string} 需要跳转到其他页时，就返回一个该页的path路径，或返回resolve该路径的promise对象 */ const onRouteBefore = ({ pathname, meta }) => { // 示例：动态修改页面title if (meta.title !== undefined) { document.title = meta.title } // 示例：判断未登录跳转登录页 if (meta.needLogin) { if (!isLogin) { return '/login' } } } export default onRouteBefore

//创建路由前置守卫 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"; } };

npm install --save redux

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

安装redux "redux": "^4.2.1",

//操作redux //1.引入redux redux插件使用的是单暴漏模式 不是export default //2.解出API 18里面使用legacy_createStore 之前使用createstore API //3.使用api 创建唯一store(store对象) 唯一是整个项目就这一个store对象 import { legacy_createStore } from "redux"; //4.创建store对象 参数必填 reducer 函数 const store = legacy_createStore(); console.log(store);

import { legacy_createStore } from "redux"; //4.创建store对象 参数必填 reducer 函数 //5.定义reducer 函数 function reducer() {} const store = legacy_createStore(reducer); console.log(store);

function reducer() { console.log("测试"); } const store = legacy_createStore(reducer); console.log(store);

//action 为触发的动作指令 function reducer(state, action) { console.log("测试", state, action); } const store = legacy_createStore(reducer); console.log(store); //redux底层执行动作 {type: '@@redux/INITt.0.e.r.j.b'} 执行该动作执行reducer获取默认值。

//定义初始化状态 let initialState = { count: 0, isShow: false, }; //reducer形参 //state状态值 //action 为触发的动作指令 function reducer(state = initialState, action) { console.log("测试", state, action); return state; } const store = legacy_createStore(reducer); //获取store state状态值 console.log(store.getState());

import { legacy_createStore } from "redux"; //4.创建store对象 参数必填 reducer 函数 //5.定义reducer 函数 //定义初始化状态 let initialState = { count: 0, isShow: false, }; //reducer形参 //state状态值 //action 为触发的动作指令 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状态值 console.log(store, store.getState()); //使用store对象api 执行动作触发修改state状态值 store.dispatch({ type: "INCREMENT" }); console.log(store.getState());

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

//引入react-redux //Provider reactredux内置组件限定范围传值 import { Provider } from "react-redux"; ReactDOM.createRoot(document.getElementById("root")).render(  {/* 将store对象关联到整个react项目 */}   );

//引入react-redux //useDispatch dispatch 触发action //useSelector getState获取状态值 import { useDispatch, useSelector } from "react-redux"; export default () => { return <>系统首页; }; //函数组件使用使用react-redux hook 完成状态值修改 //引入react-redux //useDispatch dispatch 触发action //useSelector getState获取状态值 import { useDispatch, useSelector } from "react-redux"; export default () => { //获取store状态值 let { count } = useSelector((state) => state); let dispatch = useDispatch(); let increment = () => { dispatch({ type: "INCREMENT" }); }; let decrement = () => { dispatch({ type: "DECREMENT" }); }; return ( <> 系统首页-{count} ++-- ); };

修改在reducer中修改完成state状态值之后需要断链 return { ...state }; return Object.assign({}, state);