Define query param in Link, accept path and query :

const Links = () =>
<nav >
<Link to={{path: '/', query: {message: 'Yo'}}}>Home</Link>
</nav>;

Use Query param by props.location.query:

const Container = (props) => <div>{props.location.query.message || 'Hello'}<Links /></div>;

-----------------------

import React from 'react';
import {hashHistory, Route, Router, Link, IndexRoute} from 'react-router'; const Container = (props) => <div>{props.location.query.message || 'Hello'}<Links /></div>; const Links = () =>
<nav >
<Link to={{path: '/', query: {message: 'Yo'}}}>Home</Link>
</nav>; class App extends React.Component {
render(){
return(
<Router history={hashHistory}>
<Route path="/" component={Container}></Route>
</Router>
);
}
} export default App;

[React] React Router: Querystring Parameters的更多相关文章

  1. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  2. ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

    工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...

  3. Nginx支持 React browser router

    修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...

  4. react 装 router - yarn add react-router-dom@next

    react 装 router yarn add react-router-dom@next

  5. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  6. react react使用css

    在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...

  7. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  8. React/React Native 的ES5 ES6写法对照表-b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  9. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

随机推荐

  1. 使用VS2012的C++生成dll

    1,首先,通过File->New Project的方式新建一个工程,打开"New Project"对话框. 2,选择Visual C++语言下的 Win32->Win3 ...

  2. Hadoop 实现对Value倒序排序

    数据源 A B C D Z 要实现的输出 Z D B C A 看字符顺序,其实什么也没有,只是按照后面的数字进行一次倒序排序,实现思路,1利用hadoop自带的排序功能,2.KV互换 实现代码 pub ...

  3. XPath总结一

    这里介绍下XPath的用法: 它生成一个string对象,作为XmlNode的方法SelectSingleNode,SelectNodes的输入参数 ,以此来查询符合条件的节点. 选择当前节点:  . ...

  4. zepto源码研究 - zepto.js-3 (常用的工具)

    pluck: /** * 根据是否存在此属性来获取当前集合,返回一组属性值 * @param property * @returns {*} */ pluck: function(property){ ...

  5. display 与 visibility

    项目开发中经常会遇到需要显示和隐藏DOM元素.常用的两个是display,visibility属性,高级点的会用到angularJS的ng-show,ng-if指令. W3标准对这个两个属性的解释如下 ...

  6. java学习——多线程

    本文内容来源于  历经5年锤练--史上最适合初学者入门的Java基础视频 线程:就是进程中一个负责程序执行的控制单元(执行路径) 每一个线程都有自己运行的内容.这个内容可以称为线程要执行的任务. 多线 ...

  7. 你好,C++(17)0.1*10不等于1.0——4.1.4 关系操作符4.1.5 逻辑操作符

    4.1.4  关系操作符 在C++中,除了需要用算术操作符对数据进行加减乘除的算术操作之外,我们有时候还需要对数据之间的关系进行操作,也就是对两个数据进行大小比较,得出它们之间的大小关系.在现实世界中 ...

  8. javascript sort()与reverse()

    javascript 中提供了两个对数据进行排序的方法,即sort()和reverse() 在理解的时候犯了一个非常低级的错误,现记录如下: reverse()不包括排序的功能,只是把原来的数组反转. ...

  9. [译] 什么是移动友好的 - Mobile-friendliness

    什么是移动友好的?   移动友好到底意味着什么取决于您与谁讨论它. 我们不妨这样理解: 移动友好的设计以 表现力, 内容和性能 三方面为目标来改善用户体验.   表现力 - Presentation ...

  10. python 的内置函数(1)

     19.内置函数:              abs():求绝对值              bool():求一个值是True or False ,其中False值有 0 ,空字符串'',None,空 ...