React---路由组件传参

2021年09月15日 阅读数:1
这篇文章主要向大家介绍React---路由组件传参,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、向路由组件传递参数

                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
                            备注:刷新也能够保留住参数

2、编程式路由导航

                    借助this.props.history对象上的API对操做路由跳转、前进、后退
                            -this.props.history. push()
                            -this.props.history. replace()
                            -this.props.history. goBack()
                            -this.props.history. goForward()
                            -this.props.history. go()

3、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能够用于解决一些路径错误相关的问题。

4、代码

1. 传递参数react

 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 }

 

 

本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。react-router