react router路由传参

简介: 今天,我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。ps:进入正题前,先说明一下,以下的所有内容都是在react-router V4的版本下。

今天,我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。

ps:进入正题前,先说明一下,以下的所有内容都是在react-router V4的版本下。

1.通配符传参

Route定义方式:

<Route path='/path/:name' component={Path}/>

Link组件:

<Link to="/path/通过通配符传参">通配符</Link>

参数获取:

this.props.match.params.name

注意这个match,许多博客活文章都是忽略了它,导致取不到值。这里的this.props.match.params.name === ‘通过通配符传参’。

优点:简单快捷,并且,在刷新页面的时候,参数不会丢失。

缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。

如果,你想传对象的话,可以用JSON.stringify(),想将其转为字符串,然后另外的页面接收后,用JSON.parse()转回去。这里简单提一下,不赘述。

2.query

Route定义方式:

<Route path='/query' component={Query}/>

Link组件:

var query = {
        pathname: '/query',
        query: '我是通过query传值 '
}

<Link to={query}>query</Link>

参数获取:

this.props.location.query

这里的this.props.location.query === '我是通过query传值'

优点:优雅,可传对象

缺点:刷新页面,参数丢失

3.state

Route定义方式:

<Link to={state}>state</Link>

Link组件:

var state = {
        pathname: '/state',
        state: '我是通过state传值'
    }
    <Route path='/state' component={State}/>
    

参数获取:

this.props.location.state

这里的this.props.location.state === '我是通过query传值'

优点:优雅,可传对象

缺点:刷新页面,参数丢失

以下,是我github上demo的地址,各位可以亲自尝试一下

https://github.com/hanwolfxue/react-router-parameter

相关文章
|
6月前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
167 58
|
6月前
|
前端开发
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
158 57
|
6月前
|
前端开发 UED
在React Router中,如何处理路由的404错误页面?
在React Router中,如何处理路由的404错误页面?
230 57
|
6月前
|
前端开发
如何在React Router中进行嵌套路由配置?
如何在React Router中进行嵌套路由配置?
312 57
|
6月前
|
前端开发
如何在React Router中进行路由重定向?
如何在React Router中进行路由重定向?
391 57
|
6月前
|
前端开发 网络架构
如何在React Router中传递参数?
如何在React Router中传递参数?
252 57
|
6月前
|
移动开发 前端开发 API
React Router的用法。
React Router的用法。
162 56
|
10月前
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫(Guarded Routes),使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态,实现 `PrivateRoute` 组件进行路由保护,并在 `App.js` 中使用。文章还讨论了常见问题和易错点,提供了处理异步操作的示例,帮助开发者提升应用的安全性和用户体验。
339 1
|
10月前
|
前端开发 安全 网络安全
React——路由Route
React——路由Route
114 2
React——路由Route
|
11月前
|
资源调度 前端开发 测试技术
React Router 路由管理
【10月更文挑战第10天】本文介绍了 React Router,一个在 React 应用中管理路由的强大工具。内容涵盖基本概念、安装与使用方法、常见问题及解决方案,如路由嵌套、动态路由和路由守卫等,并提供代码示例。通过学习本文,开发者可以更高效地使用 React Router,提升应用的导航体验和安全性。
746 19