react-router-dom 通过Link传值的坑人表现!
2017-11-02 16:21
836 查看
react-router-dom 通过Link传值的坑人表现!
link 可以通过以下方式传递到下一个路由:
在下一个页面可以这样取到值 (通过props.location.state 取值)
class CompName extends React.Component {
constructor(props) {
super(props);
this.state = {
param:props.location.state,
search:props.location.search,
};
console.log("state-----:",this.props) }
}
------------------------但是-----------------------------
如果在Link里面加个 target="_blank", 这样的话, state里面的值就是undefined
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
target="_blank"
}}/>
不明白这是个什么设计, 猜想可能是: 在新窗口打开的话, 已经脱离了当前的页面state, (相当于window.open新窗口了吗?) , 这样就已经不是单页面应用了???
所以React如果想要在新窗口打开的页面之间传递参数, 还是老实的用search/hash这些方法吧 !
link 可以通过以下方式传递到下一个路由:
<Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/>
在下一个页面可以这样取到值 (通过props.location.state 取值)
class CompName extends React.Component {
constructor(props) {
super(props);
this.state = {
param:props.location.state,
search:props.location.search,
};
console.log("state-----:",this.props) }
}
------------------------但是-----------------------------
如果在Link里面加个 target="_blank", 这样的话, state里面的值就是undefined
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
target="_blank"
}}/>
不明白这是个什么设计, 猜想可能是: 在新窗口打开的话, 已经脱离了当前的页面state, (相当于window.open新窗口了吗?) , 这样就已经不是单页面应用了???
所以React如果想要在新窗口打开的页面之间传递参数, 还是老实的用search/hash这些方法吧 !
相关文章推荐
- React-router(8)Link 标签 to 属性为对象时(路由信息传值)
- react路由的使用方法以及通过路由如何传参传递私有属性--【基于最新版本的react-router-dom(4.2.2)】
- react-router 学习笔记之Link带参数传值
- react-router 学习笔记之Link带参数传值
- 【react-router】从Link组件和a标签的区别说起,react-router如何实现导航并优化DOM性能?
- 通过一个用户管理实例学习路由react-router-dom知识
- react路由基础(Router、Link和Route)
- react-router-dom示例讲解(五)——阻止导航
- 关于react-router/react-router-dom v4 history不能访问问题的解决
- react-router-dom中的模糊匹配原理
- react-router中<Link/>的属性详解
- react-router-dom示例讲解(8)侧边栏
- react-router-dom
- react-router 只变 link 不更新内容的问题的解决 记录
- <Link>s rendered outside of a router context cannot navigate<React-router报错>
- react-router-dom 手动控制路由跳转
- [React]react-router跳转传值
- react-router-dom学习心得1.0
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- react-router带参数使用Link跳转并取出参数