使用query获取URL中的参数

//引入相关的依赖

const Page = props =>
<div>
<h1>{props.location.query.message}</h1>
<div>

然后在URL中输入http://localhost:8080/#/?message=wn,

页面中就会显示wn

另外我们还可以在组件中Link中设置pathname和query变量

//依然是引入各种依赖

<Link to={{ pathname:'/' , query:'wangyong' }} />

IndexRouter

IndexRouter即处理页面初始进入时候地组件展示,等路由切换的时候,再根据其他路由规则进行组件的切换展示。

<Router history={browserHistory}>
<Route path='/' component={home} >
<IndexRoute componet = {About} />
<Route path="conent" component={Contact}>
</Route>
</Router>

  

嗯呢,就是这个样子的

附上一个地址::::   http://cnodejs.org/topic/573f2756fcf698421d20371f

React全家桶之一 react-router之高级的更多相关文章

  1. 使用react全家桶制作博客后台管理系统

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...

  2. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  3. vue全家桶和react全家桶

    vue全家桶:vue  +  vuex (状态管理)  + vue-router (路由) + vue-resource +axios +elementui react全家桶 : react + re ...

  4. 手把手教你全家桶之React(一)

    前言 最近项目用到react,其实前年我就开始接触react,时光匆匆,一直没有时间整理下来(太懒啦)!如今再次用到,称工作间隙,对全家桶做一次总结,项目源码地址.废话不多说,上码. 创建一个文件目录 ...

  5. 初学者的React全家桶完整实例

    概述 该项目还有些功能在开发过程中,如果您有什么需求,欢迎您与我联系.我希望能够通过这个项目对React初学者,或者Babel/webpack初学者都有一定的帮助.我在此再强调一下,在我写的这些文章末 ...

  6. webpack4 中的最新 React全家桶实战使用配置指南!

    最新React全家桶实战使用配置指南 这篇文档 是吕小明老师结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档,总共耗时一周总结下来的,希望能对读者能够有收获, ...

  7. React全家桶+Material-ui构建的后台管理系统

    一.简介 一个使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中心. 二. ...

  8. react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

    react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...

  9. 基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统

    很久没更新博客,最近也有点忙,然后业余时间搞了一个比较完整基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统的流程系统,希望对 ...

  10. 使用React全家桶搭建一个后台管理系统

    引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术 ...

随机推荐

  1. How to Use SFTP ?

    Usage Build a SFTP session with your linux like server, e.g, by the tool "Xshell" or any y ...

  2. Bean Query 第一个版本号(1.0.0)已公布

    BeanQuery 是一个把对象转换为Map的Java工具库. 支持选择Bean中的一些属性.对结果进行排序和依照条件查询. 不只能够作用于顶层对象,也能够作用于子对象.很多其它具体的介绍能够看我的博 ...

  3. 2016/2/24 css画三角形 border的上右下左的调整 以及内区域的无限变小 边界透明

    网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天 ...

  4. Django框架之ORM

    1,字段和字段的参数 1.1>ORM的概念:对象映射模型(Objects Relational Model)是一种为了解决面向对象和关系型数据库存在的互不匹配的现象和技术,简单的说,ORM是通过 ...

  5. Linux Find Out Last System Reboot Time and Date Command 登录安全 开关机 记录 帐号审计 历史记录命令条数

    Linux Find Out Last System Reboot Time and Date Command - nixCraft https://www.cyberciti.biz/tips/li ...

  6. AnimatorCompatHelper clearInterpolator

    supportLib 26.0.0+以上AnimatorCompatHelper类被移除 所以clearInterpolator(view)找不到 替换方案: TimeInterpolator mDe ...

  7. 输出两个MAC地址之间的地址

    /******************************************************************************* * 输出两个MAC地址之间的地址 * ...

  8. ExtJS4 带清除功能的文本框 triggerfield

    Ext.onReady(function () { Ext.create('Ext.form.FormPanel', { title: 'Form with TriggerField', bodyPa ...

  9. J20170524-hm

    取りこぼし 意外地输给较自己实力弱的对手,爆出冷门,败给手下败将 振り分け 分配,整理 スキーマ 图解.模式.图式

  10. Educational Codeforces Round 52 (Rated for Div. 2) F. Up and Down the Tree 树型DP

    题面 题意:给你一棵树,你起点在1,1也是根节点,你每次可以选择去你子树的某个叶子节点,也可以选择,从叶子节点返回距离不超过k的一个根, 也就是说,你从1开始,向下跳,选择一个叶子(就是没有子树的节点 ...