react 路由传参及获取参数

24,135 阅读1分钟

我可能得了老年痴呆,react-router的参数总是只知道params和query,每次炫技的时候总是会因为少记几种传参方式而显得有点铁憨憨,所以这次搞个文档记录下,嘻嘻

1.params

<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

优势 : 刷新地址栏,参数依然存在
缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

2.query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

优势:传参优雅,传递参数可传对象;
缺点:刷新地址栏,参数丢失

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3.state

<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用: this.props.location.query.state 

优缺点同query

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3.search

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search

优缺点同params

react Hooks中获取路由参数的方式:

1.通过hooks钩子函数

import { useHistory,useLocation,useParams,useMatch } from 'react-router-dom';
let history = useHistory();
history.push('/')

2.通过函数props参数

function Home(props) {
    const location = useLocation();
    return (
        <div className='home'>
            <Banner />
        </div>
    )
}

手懒的孩子只会复制粘贴。。

原文链接:segmentfault.com/a/119000002…