react 路由的实现过程，听说现在用react的比较多
react–路由
下载（网页版） yarn add react-router-dom
官网 ：https://reacttraining.com/react-router/
2 路由的模式mode ：BrowserRouter–历史记录模式 HashRouter—hash模式
3 Router 入口文件index.js 文件 App 需要加r 其他的不加r
<Router>
<App />
</Router>
<Route path="/xxx" component={组件} /> （exact）
react路由切换的组件有三个重要的属性
**1 location ---pathname search state（undefined） --要想获取到
2 match-- params-- this.props.match.params.变量 (取路由参数) params默认值是一个空对象
3 history--push go replace listen编程式导航的方法
<Route path=“路径” render={（）=>{return <组件{…props}>}}>**
4 **Link 没有选择后的样式 ，NavLink有样式
<Link to="路径">xxx</Link>
<NavLink to="路径">xx</NavLink> 默认的类名 active 也可以改变 activeClassName
activeClassName=“selected” 可以更改NavLink选中后的类名
Switch 是渲染的匹配的第一个**
5 Redirect 重定向
<Redirect from='/路径1' to="/路径2" exact />
6 404页面
<Route component={404组件}>
7
<Route path='/xx' render={(props)=>{
return <组件 {...props} /> 意思是： 根据条件渲染不同的组件，可以做权限路由的效果
}}>
8 权限
<AuthRoute>
9 withRouter 可以让不是路由切换的组件也拥有路由的三个属性
是一个高阶组件HOC–属性代理 和反向继承
10 监控路由的组件变化
this.props.history.listen((location)=>{监听location.pathname})
11 向路由切换 的组件传多个值
<Link to={{pathname:"路径"，state:{key:value,....}}}
this.props.location.state // (state默认是undefined)
编程式导航传递多个值 this.props.history.push(path,state)
12 兄弟组件传值 pubsub-js
yarn add pubsub-js
PubSub.subscribe("事件名"，（evtName，data）=>{ })
PubSub.publish(“事件名”，数据)
13 受控组件 和非受控组件
onChange事件 value受到onChange 的控制
受控组件可以添加id来进行区分相同的onChange事件，e.target.id