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>

这样就是选中状态了！

这部分我讲的比较浅，大家实际应用中可能还会遇到其他种种情况！大家还是要多看官方文档！我只是抛砖引玉！

本文完 

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!