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 Reactfrom 'react';

import TodoListfrom './TodoList';

import {Route, NavLink, Redirect,Link}from 'react-router-dom'

const Index = ({match}) =>

       

           demo2-1

           {/*demo2-2*/}

pathname:`${match.url}/demo2-2`,

               search:'?sort=this-sort',

               hash:'#the-hash',

               state: {fromDashboard:'222' }

}}>demo2-2

render={() => ()}/>

       

       

;

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 ?

           

hash:{location.hash}

           

pathname:{location.pathname}

           

search:{location.search}

           

state:{location.state && location.state.fromDashboard}

       :

null

}

一切就绪，我们在浏览器里查看下效果！

这里都接收到了！

search 里的参数具体值可以这样获取：

import utilsfrom '../../../public/js/utils';

search:{utils.urlParam('sort',location.search)}

大家发现没有 search hash都会在URL中出现

而state没有，所有当你刷新这个页面的时候，state会消失！

又出现一个新的问题：demo2-2 没有变红！

我们可以把数据放到 NavLink里：

pathname:`${match.url}/demo2-2`,

   search:'?sort=this-sort',

   hash:'#the-hash',

   state: {fromDashboard:'222' }

}}activeClassName="selected" exact>demo2-2

这样就是选中状态了！

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

本文完

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

感谢童鞋们支持!

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