本节视频依据React Router官方教程文档, 在获取联系人列表功能中使用 loader , 在点击添加按钮实现功能时使用了 action , 说也一个它们的执行时机., 视频播放量 1303、弹幕量 4、点赞数 19、投硬币枚数 17、收藏人数 11、转发人数 1, 视频作者 水哥澎湃, 作者简介 老天爷赐
const router = createBrowserRouter([ // 根路由 { path: '/', errorElement: <ErrorPage />, async lazy() { // 导入组件,loader,action const {default: Root, loader, action} = await import('@/components/root.tsx') // return 懒加载的路由配置 return { Component: Root, loader, action }...
action在路由收到一个除Get外的提交时触发。 在传统的html中使用来构建一个表格,然后表格提交的时候,会根据其内容提交一次http请求给服务器,但这里是router,显然不需要这样的结果。在之前的学习中,一般使用e.preventDefault()来进行处理,不过react-router-dom提供了另一个组件<Form>来解决这个问题 //Main.js ......
action:获取当前操作(push/pop/replace) location:获取当前位置,包括(pathname、search、hash、state、) push(''):添加一个新的条目到历史堆栈(一般会用来跳转到一个新页面) replace(''):替换掉当前堆栈上的条目 go(n):通过n个条目移动历史堆栈中的指针,向前或向后n个 goBack():后退一个历史条目,相当于go(-...
{...// 此处省略部分代码consthref=createHref(location)const{key,state}=locationif(canUseHistory){/* 改变 url */globalHistory.pushState({key,state},null,href)if(forceRefresh){window.location.href=href}else{/* 改变 react-router location对象, 创建更新环境 */setState({action,location})}}else{...
之后会在结尾调用,completeNavigation 方法。顾名思义,该方法为完成跳转的方法,在 completeNavigation 中首先会进行一系列 actionData、loaderData、block 之类的判断,这部分逻辑并不是我们的重点,重点在于: image.png completeNavigation 默认会调用 updateState 去更新最新的路由数据。
{type:Actions.SAVE_EXPRESS,express,callback})3、修改对应的epic(由于使用的redux-observable所以会有这个方法)constsaveExpress=action$=>action$.pipe(ofType(Actions['SAVE_EXPRESS']),switchMap(params=>postExpress({...params.express}).then(()=>{params.callback()returnsaveExpressSuccess()})))由此...
constsetState=(nextState)=>{/* 合并信息 */Object.assign(history,nextState)history.length=globalHistory.length/* 通知每一个listens 路由已经发生变化 */transitionManager.notifyListeners(history.location,history.action)} 代码很简单:统一每个transitionManager管理的listener路由状态已经更新。
本篇介绍使用 axios 请求后台接口获取数据库数据,利用action更新store,从而实现页面状态的刷新。 以登录功能做一个实例,一般复杂的项目建议将action单独管理,在login/下创建action.js,添加一个登录的action // login/action.jsimportaxiosfrom"axios";// 登录函数exportconstpasswordLogin=(data)=>{returndispatch=>{di...
: Router[], element: any } const useStore = createSlice({ name: 'route', initialState: { routerList: [] as Router[], //动态路由数组 menuList: [] as Menu[] //菜单数组 }, reducers: { setRouterList(state, action) { state.routerList = action.payload }, setMenuList(state, action)...