React尚硅谷075-093（React路由）

基础

引入Link（to）标签和Route（path，componennt）标签实现路由跳转

NavLink

自动加类名active

自定义：activeClassName=“”

传标签体内容children

<MyNavLink to='/home'>Home</MyNavLink>
<MyNavLink to='/home' children="Home"></MyNavLink>

接标签体内容，是个特殊的标签属性

Switch

一个路径写了两个组件的话，会继续向下匹配，两个组件都会显示

<Route path="/home" component={Home}>
<Route path="/home" component={Test}>

Swich唯一匹配

<Swich>
    <Route path="/home" component={Home}>
    <Route path="/home" component={Test}>
</Swich>

样式丢失问题

public就是localhost：3000内置服务器地址

如果访问了没有的资源，会返回index.html

多级路由刷新的时候，index.html中引入样式用了 ./样式丢失

1. 不能在index.html里用./css/bootstrap.css,需要去掉.因为./有是当前路径，/是直接public
2. %PUBLIC_URL%/css/bootstrap.csss
3. 用hashrouter，因为#后面的内容不发给服务器

模糊匹配与严格匹配

不能匹配上
to="/home"
path="/home/a/b"
模糊匹配，能匹配上（to可以给多，但是顺序要对）
to="/home/a/b"
path="/home"
精准匹配exact
<Route exact={true} path="/about" component={About}>
<Route exact path="/about" component={About}>
出问题的时候再使用exact，需要再卡，有些时候会导致无法继续匹配二级路由

Rrdirect重定向

跟谁都匹配不上的时候
<Swich>
    <Route path="/about" component={About}>
    <Route path="/home" component={Home}>
    <Redirect to="/about">
</Swich>

二级路由

• 路由的匹配是按照顺序来的

• 如果二级路由父路由开启了严格匹配，则会出错

路由传参

urlencoded编码：key=value&key=value

路由组件收到的参数是history、location、match

params： 建议

<Link to={`/home/message/detail/${ele.id}/${ele.title}`}>{ele.title}</Link>
<Route path="/home/message/detail/:id/:title" component={Detail} />
const {id,title} = this.props.match.params;

search： 不建议

<Link to={`/home/message/detail?id=${ele.id}&title=${ele.title}`}>{ele.title}</Link>
<Route path="/home/message/detail" component={Detail} />
import qs from 'querystring'
const { search } = this.props.location;
const {id,title}=qs.parse(search.slice(1))

state：

不会在地址栏看到参数，刷新不丢失

<Link to={{pathname:'/home/message/detail',state:{id:ele.id,title:ele.title}}}>{ele.title}</Link>
<Route path="/home/message/detail" component={Detail} />
const {id,title} =this.props.location.state;

路由默认push模式

开启replace模式

 <Link replace={true} to={{pathname:'/home/message/detail',state:{id:ele.id,title:ele.title}}}>{ele.title}</Link>
//或者直接replace

编程式路由

获取传过来的值同上一点：路由传参

params：

<button onClick={()=>{this.pushShow(ele.id,ele.title)}}>push查看</button>
<button onClick={()=>{this.replaceShow(ele.id,ele.title)}}>replace查看</button>
replaceShow=(id,title)=>{
    this.props.history.replace(`/home/message/detail/${id}/${title}`)
}
pushShow=(id,title)=>{
    this.props.history.push(`/home/message/detail/${id}/${title}`)
}

query，search：

replaceShow=(id,title)=>{
    this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
}

state：当第二个参数

replaceShow=(id,title)=>{
    this.props.history.replace(`/home/message/detail`,{id,title})
}

路由回退和前进

this.props.history.goBack()
this.props.history.goForward()
this.props.history.go()//0为刷新，1为前进一步，-1为后退一步

获取路径

location.pathname
match.path
match.url

withRouter

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API

withRouter的放回值是一个新组件

import { withRouter } from 'react-router-dom'
class App extends Component {}
export default withRouter(App)

HashRouter和BrowserRouter

• HashRouter多个#

• 刷新后对路由state参数的影响

  1. HashRouter刷新丢失state参数
  2. BrowserRouter没有影响，因为state保存在history对象中