[React] React Router: Querystring Parameters
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的更多相关文章
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
- ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例
工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...
- Nginx支持 React browser router
修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...
- react 装 router - yarn add react-router-dom@next
react 装 router yarn add react-router-dom@next
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- react react使用css
在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表-b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [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 ...
随机推荐
- 使用VS2012的C++生成dll
1,首先,通过File->New Project的方式新建一个工程,打开"New Project"对话框. 2,选择Visual C++语言下的 Win32->Win3 ...
- Hadoop 实现对Value倒序排序
数据源 A B C D Z 要实现的输出 Z D B C A 看字符顺序,其实什么也没有,只是按照后面的数字进行一次倒序排序,实现思路,1利用hadoop自带的排序功能,2.KV互换 实现代码 pub ...
- XPath总结一
这里介绍下XPath的用法: 它生成一个string对象,作为XmlNode的方法SelectSingleNode,SelectNodes的输入参数 ,以此来查询符合条件的节点. 选择当前节点: . ...
- zepto源码研究 - zepto.js-3 (常用的工具)
pluck: /** * 根据是否存在此属性来获取当前集合,返回一组属性值 * @param property * @returns {*} */ pluck: function(property){ ...
- display 与 visibility
项目开发中经常会遇到需要显示和隐藏DOM元素.常用的两个是display,visibility属性,高级点的会用到angularJS的ng-show,ng-if指令. W3标准对这个两个属性的解释如下 ...
- java学习——多线程
本文内容来源于 历经5年锤练--史上最适合初学者入门的Java基础视频 线程:就是进程中一个负责程序执行的控制单元(执行路径) 每一个线程都有自己运行的内容.这个内容可以称为线程要执行的任务. 多线 ...
- 你好,C++(17)0.1*10不等于1.0——4.1.4 关系操作符4.1.5 逻辑操作符
4.1.4 关系操作符 在C++中,除了需要用算术操作符对数据进行加减乘除的算术操作之外,我们有时候还需要对数据之间的关系进行操作,也就是对两个数据进行大小比较,得出它们之间的大小关系.在现实世界中 ...
- javascript sort()与reverse()
javascript 中提供了两个对数据进行排序的方法,即sort()和reverse() 在理解的时候犯了一个非常低级的错误,现记录如下: reverse()不包括排序的功能,只是把原来的数组反转. ...
- [译] 什么是移动友好的 - Mobile-friendliness
什么是移动友好的? 移动友好到底意味着什么取决于您与谁讨论它. 我们不妨这样理解: 移动友好的设计以 表现力, 内容和性能 三方面为目标来改善用户体验. 表现力 - Presentation ...
- python 的内置函数(1)
19.内置函数: abs():求绝对值 bool():求一个值是True or False ,其中False值有 0 ,空字符串'',None,空 ...