react ——withRouter——页面隐式传值—嵌套路由——渲染方式—

withRouter

import {Route,Switch,withRouter} from "react-router-dom"

withRouter高阶组件增强组件——获取路由对象。
withRouter 让非路由直接匹配渲染的组件中能得在this.props中得到路由对象

@withRouter
class App extends Component {render() {console.log(this.props);******}
}
export default withRouter(App);

通过state隐式来传递数据到目标页面

声明式：

import {Route,Switch,withRouter} from "react-router-dom"

 <NavLink to={{pathname:'/home', state:{name:"detail过来的数据"}}}>点击切换到home</NavLink>

编程式

onClickHandler = ()=>{this.props.history.push({pathname:"/home",state:"detail",search:"name:userzhang"});}

嵌套路由

在子路由定义的组件中，可以通过props中提供的路由对象来获取父路由定义的地址
在定义嵌套路由时，父路由一定一定一定不能定义为严格模式

<div><h3>后台首页</h3><NavLink to={{pathname:"/admin/index"}}>[index]</NavLink>----<NavLink to={{pathname:"/admin/user"}}>[user]</NavLink><hr /><Switch><Route path="/admin/index" component={Index}></Route><Route path="/admin/user" component={User}></Route>\<Route component={User}></Route>{/* 子路由一个都没匹配上渲染此路由组件 */}</Switch>
</div>

在子路由定义的组件中，可以通过props中提供的路由对象来获取父路由定义的地址

 let parentRoutePath = this.props.match.path
<NavLink to={`${parentRoutePath}/index`}>后台首页</NavLink>
<Route path={`${parentRoutePath}/index`} component={Index} />

通过渲染类和通过函数渲染的区别

类：`<Route path="/" component={RenderCmp} />t`

1.对于规则匹配成的组件没有办法去写逻辑，会直接渲染
2.规则匹配成功后，会给组件中的props自动映射对应的路由对象
3.当前载体中的state更新,它不会重新创建

函数：`<Route path="/" component={回调函数返回一个组件} />`

1.可以在规则匹配成功后，进行业务逻辑的判断来决定最终是否渲染
2.规则匹配成功后，它需要你把回调函数中路由对象
3.手动的通过props传给要渲染的组件
3.当前的载体中的state如果,发生改变,则它对应匹配要渲染的组件会销毁并重新创建
建议: component属性的回调函数的方式,不要在工作中使用,可以用 render来代替

render渲染方式`<Route path="/" render={route => {} />`

手动的通过props传给要渲染的组件
它有component类的优点也有component回调的优点,但没有component回调中的缺点

<Route path="/admin" render={(route)=>{return <Admin {...route}/>}} />

children渲染方式

children属性中传入jsx元素,则它会根据path路径来匹配规则,如果匹配成功则渲染,不会自动注入路由对象到props中

<Route path="/home" children={<RenderCmp />} />

children属性为一个函数,则它的渲染不会根据路由规则来匹配渲染,它默认都会渲染出来
在此函数的形参中有一个路由对象,此对象中有一个match属性,如果当前访问的地址和path路径一致,则返回为对象,否则为null
函数方式: 如果你当前的页面中有一些显示的元素它在任何的地址中都要显示,且还要根据是否是激活路由,而高亮出来,就可以用它

<Routepath="/home"children={route => {// console.log('match', route.match)// return <RenderCmp {...route} />return route.match ? <RenderCmp {...route} /> : null}}
/>

登录验证

受控表单，点击后数据存储在本地缓存，跳转路由

state = {username:{value:"",onChange:e=>this.setState(state=>({username:{...state.username,value:e.target.value.trim()}}))}}onClickHandler = ()=>{localStorage.setItem("username",this.state.username.value);/* 点击后存储跳转到后台 */this.props.history.push("/admin")}

完成一次渲染时候的判断：

<Route path='/admin' render={(route)=>{if(localStorage.getItem("username")){return <Admin/>}else{return <Redirect to="/login"/>}}}
></Route>

自定义导航组件

取消顶级元素的包裹，降低dom操作的深度和标签繁杂嵌套

Fragment 它可以当作顶层元素来包裹子元素,但它不会编译成html元素
Fragment 有简写,简写时,可以不需要导入Fragment组件 <></>
import React, { Component, Fragment } from 'react'

<Fragment>
<h1>text_render</h1>
</Fragment>
===================
<>
<h1>text_render</h1>
</>

根据传给组件的props，生成对应的导航组件，组件身上传过去的值来访问请求组合成一个自定义的组件。

<div><h1>Mylink</h1><Mylink tag="h3" to="/render/home">home页面</Mylink><Mylink tag="h3" to="/render/about">about页面</Mylink><hr /><Switch><Route path="/render/home" component={Home}></Route><Route path="/render/about" component={About}></Route></Switch>
</div>

Mylink组件关键代码

onClickHandler = (to)=>(e)=>{this.props.history.push(to);
}
render() {let {tag:Tag,to,children} = this.propsreturn (<><Tag onClick={this.onClickHandler(to)}>{children}</Tag></>);
}

如果让他产生高亮的效果：
可以考虑使用children的渲染方式；