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. 学习笔记之AJAX无刷新分页

    利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...

  2. PHP iconv()编码转换函数用法示例

    PHP iconv()字符编码转换函数的用法,iconv()函数,在php5中是内置的,语法格式:iconv("UTF- 8","GB2312//IGNORE" ...

  3. Python3 如何优雅地使用正则表达式(详解六)

    修改字符串 我们已经介绍完如何对字符进行搜索,接下来我们讲讲正则表达式如何修改字符串. 正则表达式使用以下方法修改字符串: 方法 用途 split() 在正则表达式匹配的地方进行分割,并返回一个列表 ...

  4. windows 下安装使用ipython

    转自:https://my.oschina.net/u/1431433/blog/189337 1. 下载安装Python 下载: python-3.3.3.amd64.msi (救在Python.o ...

  5. 网站(Tomcat)超线程宕机

    网站大中午的又挂了····· 拷了日志如下: 2014-4-12 13:22:30 org.apache.tomcat.util.net.JIoEndpoint createWorkerThread信 ...

  6. C语言学习笔记--指针与字符串

    字符类型 char(character)是一种整数,也是一种特殊的类型:字符.这是因为 ① 用单引号表示的字符字符字面量:‘a’,'1' ②‘’也是一个字符 ③printf和scanf里用%c来输入. ...

  7. Android判读是否安装了某一款APP

    /** * @Title: isAvilible * @Description: 断手机已安装某程序 * @param @param context * @param @param packageNa ...

  8. Android修改XML文件

    最近在项目中需要使用XML记录数据,网上这方面的文章较少,记录一下 使用DOM方式 /** * 追加内容到XML文档 * @param instructions * @throws ParserCon ...

  9. CA

    http://www.cmca.net/index.php?option=com_content&view=article&id=55&Itemid=16

  10. 将Altium中的原理图与PCB导出为PDF的步骤与方法

    1.通过File-Smart PDF(文件-智能PDF),快捷键F-M打开. 2.选择打印的范围:Current Project还是Current Document,还有生成的PDF的存放位置. 3. ...