React第三方组件1(路由管理之Router的使用③传参)
React第三方组件1(路由管理之Router的使用③传参)
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22
2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23
3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24
4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25
5、React第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
今天我们讲下，如何给路由转递参数，路由下组件如何接收参数！
我们要实现的目标是给demo2-2 路由传递参数！然后在TodoList下接收参数！
我们先用下 react-router-dom 的Link组件！
import React from 'react';
import TodoList from './TodoList';
import {Route, NavLink, Redirect,Link} from 'react-router-dom'
const Index = ({match}) =>
<div>
<div className="nav">
<NavLink to={`${match.url}/demo2-1`} activeClassName="selected" exact>demo2-1</NavLink>
{/*<NavLink to={`${match.url}/demo2-2`} activeClassName="selected" exact>demo2-2</NavLink>*/}
<Link to={{
pathname: `${match.url}/demo2-2`,
search: '?sort=this-sort',
hash: '#the-hash',
state: { fromDashboard: '222' }
}}>demo2-2</Link>
</div>
<Route exact path={`${match.url}`}
render={() => (<Redirect to={`${match.url}/demo2-1`}/>)}/>
<Route path={`${match.url}/demo2-1`} component={TodoList}/>
<Route path={`${match.url}/demo2-2`} component={TodoList}/>
</div>
;
export default Index;
其中：
pathname：路由地址
search：通俗一点讲就是url 中？后面的数据
hash ：通俗一点讲就是在search后面再加#
state：通俗一点讲就是 转递一些 状态数据，可以是 对象、数组、字符串等
最后url会是这样子的
http://localhost:8080/#/demo2/demo2-2?sort=this-sort#the-hash
我们在TodoList里接收参数
let {location} = this.props;{
location ?
<div>
<div>hash:{location.hash}</div>
<div>pathname:{location.pathname}</div>
<div>search:{location.search}</div>
<div>state:{location.state && location.state.fromDashboard}</div>
</div>
:
null
}
一切就绪，我们在浏览器里查看下效果！
这里都接收到了！
search 里的参数具体值可以这样获取：
import utils from '../../../public/js/utils';<div>search:{utils.urlParam('sort',location.search)}</div>
大家发现没有 search hash都会在URL中出现
而state没有，所有当你刷新这个页面的时候，state会消失！
又出现一个新的问题：demo2-2 没有变红！
我们可以把数据放到 NavLink里：
<NavLink to={{
pathname: `${match.url}/demo2-2`,
search: '?sort=this-sort',
hash: '#the-hash',
state: { fromDashboard: '222' }
}} activeClassName="selected" exact>demo2-2</NavLink>
这样就是选中状态了！
这部分我讲的比较浅，大家实际应用中可能还会遇到其他种种情况！大家还是要多看官方文档！我只是抛砖引玉！