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. msi软件包无法安装

    安装某些msi软件包,提示“This advertised application will not be installed because it might be unsafe. Contact ...

  2. 使用AFNetworking时, 控制器点击返回销毁了, 但还是会执行请求成功或失败的block, 导致野指针异常

    原本我以为是我程序框架有问题...后来才知道, 无知真可怕... __unsafe_unretained __block typeof(self) weakSelf = self; AFHTTPSes ...

  3. Caused by: org.apache.ibatis.ognl.OgnlException: source is null for getProperty(null, "mil_id")

    今天在使用mybatis处理数据库的时候,突然抛出了上述异常,让我感到很惊讶,因为在处理save的时候,在Mybatis的配置文件中,我根本就没有使用到ognl表达式,系统怎么会抛出上述异常.而且之前 ...

  4. 网页通用的测试用例(出处:: 51Testing-- lxp1119216)

    此题的考察目的:面试者是否熟悉各种测试方法,是否有丰富的Web测试经验, 是否了解Web开发,以及设计Test case的能力 这个题目还是相当有难度的, 一般的人很难把这个题目回答好. 首先,你要了 ...

  5. 前台任意页面调用自定义字段选项 box 单选 多选方法及查询

    在模板页增加函数,函数写法比较特殊,但是v9模板引擎nb,能够识别   <?              function xbox($field,$na){               $a=p ...

  6. C++中复制构造函数与重载赋值操作符

    我们都知道,在C++中建立一个类,这个类中肯定会包括构造函数.析构函数.复制构造函数和重载赋值操作:即使在你没有明确定义的情况下,编译器也会给你生成这样的四个函数.例如以下类:   class CTe ...

  7. SQLServer 2008 删除、压缩日志

    SQL Server 2008删除或压缩数据库日志的方法 由于数据库日志增长被设置为“无限制”,所以时间一长日志文件必然会很大,一个400G的数据库居然有600G的LOG文件,严重占用了磁盘空间.由于 ...

  8. BZOJ 3240: [Noi2013]矩阵游戏

    3240: [Noi2013]矩阵游戏 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1586  Solved: 698[Submit][Status ...

  9. 搭建splinter+python环境时遇到的错误

    因为不想用urllib2了,没有用过splinter,今天就想试试,毕竟后者支持的功能更人性化/自动化. 1,安装splinter 安装过程很简单,安装了pip的话,执行: $ [sudo] pip ...

  10. AVAudioPlayer音频播放器-备用

    IOS中有三种播放音频的方式:AVAudioPlayer.音频服务.音频队列. 此文主要讲AVAudioPlayer,其他两个请见相关文章. AVAudioPlayer在AVFoundation框架下 ...