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. CSS3 之动画及兼容性调优

    由于CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持. 所以有时候一些简单的动画效果,还只是用js代码来实现,但是效率偏低,而且效果有些偏生硬,不够顺滑. 毕竟用 ...

  2. 修改登录linux之后显示的默认文件夹目录

    命令如下: ll -a vim .bash_profile 最后一行加上cd 需要显示的文件夹

  3. jquery ajax 跨域处理

    今天使用JQuery Ajax 在本地电脑获取远程服务器数据的时候,发现使用$.ajax,$.getJSON,$.get这些都没有反应,后来再统一个网站下测试了一下,代码写得没有问题.后来想了想好想, ...

  4. Hyper-V的三种网卡

    External ======= 虚拟机和物理网络.本地主机都能通信 Internal ======= 虚拟机之间互相通信,并且虚拟机能和本机通信 Private ======= 仅允许运行在这台物理 ...

  5. 用MS自带的VS构建joint语句

    在其中一个表上,右键,选择"New Query",弹出"Add Table"对话框,将待joint的两个表Add,并选择相应字段,则会自动构建joint语句,其 ...

  6. linux 第二天

    文件权限和用户组 groupadd 组名 groupadd policeman 查看组 vi /etc/group cat /etc/group 创建用户,并同时指定将该用户分配到哪个组 userad ...

  7. 常用命令常用sql:SHOWVARIABLESLIKE'character%'

    mysql学习笔记-常用命令 常用sql: SHOW VARIABLES LIKE 'character%';查看字符集SHOW VARIABLES LIKE 'collation_%';show e ...

  8. error: expected constructor, destructor, or type conversion before '.' token

    今天写代码是遇到这样一个问题error: expected constructor, destructor, or type conversion before '.' token:立马网上查,原来是 ...

  9. 手机端禁止iPhone字体放大

    /*禁止iphone字体放大 */ html { -webkit-text-size-adjust: none; }

  10. Ubuntu下搭建本地WordPress站点

    想在本地搭建WordPress博客站点作测试用?本教程一步一步教您在Linux上搭建一个LAMP(Linux, Apache, MySQL, PHP)服务器并部署WordPress博客. 请注意在复制 ...