把一个非路由管控的组件,模拟成为路由管控的组件
export default withRouter(connect()(组件)); 先把nav基于connect高阶一下,返回的是一个代理组件proxy, 把返回的代理组件受路由管控受路由管控组件的一些特点:
只有当前页面的哈希地址和路由指定的地址匹配,才会把对应的组件渲染(with-router是没有地址匹配,都被模拟成为受路由管控的)
路由切换的原理,凡是匹配的路由,都会把对应的组件内容,重新添加到页面中,相反,不匹配的都会在页面中移出掉,下一次重新匹配上,组件需要重新渲染到页面中,每一次路由切换的时候(页面的哈希路由由地址改变),都会从一级路由开始重新校验一遍
所有受路由管控的组件,在组建的属性props上默认添加了三个属性
history
push 向池子中追加一条新的信息,达到切换到指定路由地址的目的
this.props.history.push('/plan')js中实现路由切换
go 跳转到指定的地址(传的是数字 0当前 -1上一个 -2上两个...)
go-back =>go(-1) 回退到上一个地址
go-forward =>go(1) 向前走一步
location 获取当前哈希路由渲染组件的一些信息
pathname: 当前哈希路由地址
search : 当前页面的问号传参值
state: 基于redirect/link/nav-link中的to,传递的是一个对象,对象中编写state,就可以再location.state中获取
match :获取当前路由匹配的一些结果
params: 如果当前路由匹配的是地址路径参数,则这里可以获取传递参数的值
Redirect
重定向3xx
to:string 要重定向的地址
to:object 要重定向的位置
<Redirect to={{ pathname: '/login', search: '?utm=your+face', state: { referrer: currentLocation } }} />push 重定向会将新的位置推入历史记录
<Redirect push to="/somewhere/else" />
<Redirect from={'/custom'} to={'/custom/list'}/> 当请求的是/custom的时候,直接跳转到/custom/list的路由地址qs
yarn add qs
问号传参
OA和ERPOA:企业办公管理系统(偏向于有助于日常办公)
ERP: 企业战略资源管理系统(偏向于有管理思想)
钉钉
TAPD
今目标
纷享销客
CRM:客户管理系统
CMS:内容管理系统(内容分发平台)
IM:即时通信系统
redux中间件redux-logger:能够在控制台清晰的展示当前redux操作的流程和信息(原有状态,派发信息,修改后的状态)
redux-thunk: 处理异步的dispatch派发
redux-promise: 在dispatch派发的时候支持promise操作
yarn add redux-logger redux-thunk redux-promise store/index.js ===== import {createStore, applyMiddleware} from 'redux';//applyMiddleware导入中间件 import reduxLogger from 'redux-logger'; import reduxThunk from 'redux-thunk'; import reduxPromise from 'redux-promise'; import reducer from './reducer'; let store = createStore(reducer, applyMiddleware(reduxLogger, reduxThunk, reduxPromise)); export default store; //=>PROMISE中间件的语法 create(payload) { return { type: TYPES.CUSTOM_CREATE, //=>传递给REDUCER的PAYLOAD需要等待PROMISE成功，把成功的结果传递过去 payload: new Promise(resolve => { setTimeout(() => { resolve(payload); }, 3000); }) } } create(payload) { //=>THUNK中间件的使用语法：在指定执行派发任务的时候，等待3000MS后在派发 return dispatch => { //=>DISPATCH都传递给我们了，我们想什么时候派发，自己搞定即可 setTimeout(() => { dispatch({ type: TYPES.CUSTOM_CREATE, payload }); }, 3000); }; }路由问号传参案例
Ant Desion UI框架