React---路由组件传参
一、向路由组件传递参数
1.params参数
路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
接收参数：this.props.match.params
2.search参数
路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.state
备注：刷新也可以保留住参数
二、编程式路由导航
借助this.props.history对象上的API对操作路由跳转、前进、后退
-this.props.history.push()
-this.props.history.replace()
-this.props.history.goBack()
-this.props.history.goForward()
-this.props.history.go()
三、BrowserRouter与HashRouter的区别
1.底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响，因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失！！！
4.备注：HashRouter可以用于解决一些路径错误相关的问题。
四、代码
1. 传递参数
1 import React, { Component } from 'react'
2 import {Link,Route} from 'react-router-dom'
3 import Detail from './Detail'
4
5 export default class Message extends Component {
6 state = {
7 messageArr:[
8 {id:'01',title:'消息1'},
9 {id:'02',title:'消息2'},
10 {id:'03',title:'消息3'},
11 ]
12 }
13 render() {
14 const {messageArr} = this.state
15 return (
16 <div>
17 <ul>
18 {
19 messageArr.map((msgObj)=>{
20 return (
21 <li key={msgObj.id}>
22
23 {/* 向路由组件传递params参数 */}
24 {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}
25
26 {/* 向路由组件传递search参数 */}
27 {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}
28
29 {/* 向路由组件传递state参数 */}
30 <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
31
32 </li>
33 )
34 })
35 }
36 </ul>
37 <hr/>
38 {/* 声明接收params参数 */}
39 {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}
40
41 {/* search参数无需声明接收，正常注册路由即可 */}
42 {/* <Route path="/home/message/detail" component={Detail}/> */}
43
44 {/* state参数无需声明接收，正常注册路由即可 */}
45 <Route path="/home/message/detail" component={Detail}/>
46
47 </div>
48 )
49 }
50 }2. 接收参数
1 import React, { Component } from 'react'
2 // import qs from 'querystring'
3
4 const DetailData = [
5 {id:'01',content:'你好，中国'},
6 {id:'02',content:'你好，尚硅谷'},
7 {id:'03',content:'你好，未来的自己'}
8 ]
9 export default class Detail extends Component {
10 render() {
11 console.log(this.props);
12
13 // 接收params参数
14 // const {id,title} = this.props.match.params
15
16 // 接收search参数
17 // const {search} = this.props.location
18 // const {id,title} = qs.parse(search.slice(1))
19
20 // 接收state参数
21 const {id,title} = this.props.location.state || {}
22
23 const findResult = DetailData.find((detailObj)=>{
24 return detailObj.id === id
25 }) || {}
26 return (
27 <ul>
28 <li>ID:{id}</li>
29 <li>TITLE:{title}</li>
30 <li>CONTENT:{findResult.content}</li>
31 </ul>
32 )
33 }
34 }