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. 批量执行插入的sql和自动补零

    DECLARE @invoice_no int SET @invoice_no=3 WHILE @invoice_no<=100 --需要插入的次数 BEGIN --此处需要执行的插入sql文 ...

  2. Undefined symbols for architecture x86_64:

    真机运行正常, 但要在模拟器运行的时候, 编译就报错了: 解决方法: 1.将Build Settings的Architectures修改为arm7 armv7s.Xcode7默认是加上arm64的,但 ...

  3. Xcode 7 warnings: object file was built for newer iOS version than being linked

    编译之后出现: ld: warning: object file xxxxx... was built for newer iOS version (8.1) than being linked (7 ...

  4. PHP 运算符

    本章节我们将讨论 PHP 中不同运算符的应用. 在 PHP 中,赋值运算符 = 用于给变量赋值. 在 PHP 中,算术运算符 + 用于把值加在一起. PHP 算术运算符 运算符 名称 描述 实例 结果 ...

  5. a标签增加onclick事件提示未定义function

    项目使用的是ext框架,版本是ext4.2 出现的问题代码如下: renderer : function(value){ var html = "<a href=\"java ...

  6. Delphi之TreeView

    TreeView是Delphi中使用频率比较高的一个控件,虽然使用次数很多,但总结不够.借着这次做GDW原型的机会总结一下,写的过程中也会参考网上的博文. TTreeView.TTreeNodes和T ...

  7. destoon程序中qq号码,手机号,msn必选项实现方法

    最近发现好多客户,信息不完全!还是把qq号码,手机号,msn设为必选项比较好!下面以把qq设为必选项为例找到模板 template/default/member/edit.htm 找到 functio ...

  8. 成功启动了Apache却没有启动apache服务器

    原因没有用管理员身份运行...

  9. Unix和Linux下C语言学习指南

    转自:http://www.linuxdiyf.com/viewarticle.php?id=174074 Unix和Linux下C语言学习指南 引言 尽管 C 语言问世已近 30 年,但它的魅力仍未 ...

  10. Oracle 基本命令

    (1)查看所有表 >select * from tab; (2)查看表结构 >desc 表名; (3)将查询出来的字段显示为其他名称 >select empno as 员工编号 fr ...