给link to属性添加对象
在组件中的data.location中可以查看到相应的值,并且hash、seach值会被自动拼接到url上
Action!
虽然直接传值也能获取,但是又一个专门接收值的属性=>state:{name:"sy"}
动态路由:跳转时传递参数
<Link to="/Message/Info/">MessageIofo</Link>
<Route path="/Message/Info/:id" component={MessageIofo}></Route>
function MessageIofo(data){
console.log(data.match.params)
return(
<div>I'm {data.match.params.id} MessageIofo</div>
)
}
访问/Message/Info/时手动在浏览器的url后输入ID值,如12,那么就会自动获取到此id值,并传输到data.match.params
中
重定向 Redirect
<Redirect to="/url"><Redirect/>
Switch 让其内部相同的route值,只匹配一次
<Switch>
<Route path="/Message" component={Message}></Route>
<Route path="/Message" component={Message1}></Route>
</Switch>
只会跳转出第一个message页面
withRouter
一般作为首页的组件,都不是通过路由跳转的,而是浏览器一打开就会加载此组件,所以此组件的props中的history、location等api都是不可用的
使用方式:
- 引用:
import 'withRouter' from 'react-router-dom'
- 将需要加载的组件(假设这里需要暴露的组件为App)=>
export default (App)