2020-02-26

路由 （router） V5版本
后端路由 ： 根据用户的请求返还不同的内容前端路由 ：根据不同的Url去切换组件路由的安装 npm i react-router-dom路由的引入路由模式1.历史记录模式（BrowserRouter）2.hash (HashRouter)在入口文件index.js包裹起来根组件APP路由的使用import {Route,NavLink,Redirect,Switch} from 'react-router-dom’Route： 路由模块NavLink/Link:前者自带一个类名active吗，切换路由是添加样式redirect:重定向模块，能实现自动跳转功能switch:同一个页面多个路由每次只显示一个渲染视图区 监控路由变化如果在不是路由渲染的组件里监听路由需要引入 withRouter 高阶函数 属性代理作用：让不是路由的组件也具有路由切换组件的三个属性（location match history）例如APP withRouter(App)绑定this this.方法名=this.方法名.bind(this) 监听路由变化this.props.history.listen((location)=>{ console.log(location.pathname); })路由传参1.静态路由传参：2.动态路由传参：根据点击的不同传入不同的参数取参数 this.props.match.params.接收参数名新增特性 Hook无状态组件里使用有状态： 在react里引入 useState() 返回值一个值 和一个回调函数通过解构赋值使用 let [a,b]=useState(1) 这是a就等于1使用例子 <button onClick={()=>{b(传的参数)}}>编程式导航1. <button onClick={this.方法名.bind{this,“传的参数”}}>方法名（）{this.props.history.push(“路径名”+接收参数名)}2.<button onClick={()=>{props.history.push("/路径名/参数")}>另外一种跳转写法<link to={{pathname:“路径名”}}>Route的render属性 默认没有路由的三个属性<Route path=“路径名” render={(props)=>{return 组件名（标签栏 {…props}） }}>路有权限判断当跳转到某个页面的时候，需要判断页面是否需要满足某些条件，通过三元表达式判断，满足条件跳转到某个页面，不满足条件跳到另一个页面，需要传props这个参数，不然在组件里拿不到路由的三个属性