[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 ...
随机推荐
- zookeeper笔记
zookeeper用于分布式配置管理,读写锁等等..后续补充.
- AD域属性对照表
查看文章 AD属性对照表(一)[AD域][属性] 2011年08月25日 星期四 19:36AD属性对照表家庭电话 :“常规”标签 姓 Sn Y 名 gi ...
- Oracle数据库名、实例名、数据库域名、全局数据库名、服务名之间的区别
数据库名.实例名.数据库域名.全局数据库名.服务名 这是几个令很多初学者容易混淆的概念.相信很多初学者都与我一样被标题上这些个概念搞得一头雾水.我们现在就来把它们弄个明白. 一.数据库名 什么是数据库 ...
- oracle 复制一条记录只改变主键不写全部列名
场景:表TEST中有C1,C2,C3...字段,其中C1为主键,先需要复制表TEST中一条(C1='1'的)记录,修改主键列C1和需要变更的列后,再插入到表TEST中. procedure P_TES ...
- iOS8中添加的extensions总结(四)——Action扩展
Action扩展 注:此教程来源于http://www.raywenderlich.com的<iOS8 by Tutorials> 1.准备 本次教程利用网站bitly.com进行 bit ...
- CentOS下安装nginx并且升级nginx到最新版
yum install yum-fastestmirro yum install nginxyum update nginx(之前先配置一下)vim /etc/yum.repos.d/nginx.re ...
- js 解析 json
1.简单的json格式 { "user": [ { "name":"name1", "age":24, "se ...
- PADS Layout将导入DXF,并转换成板框步骤
1.在PADS Layout中选择 Import... 2.选择DXF文件(一般由结构工程师给出),直接点OK即可. 3.导入后,板框图一角视图如下.右键选择 Select Shapes,然后双击外框 ...
- Qt on Android
Qt on Android Episode 7(翻译) http://blog.csdn.net/foruok/article/details/46323129 Android基础整理之四大组件Act ...
- ListView的getFirstVisiblePosition等方法返回的是哪个对象
int firstPosition = lisView.getFirstVisiblePosition(); int lastPosition = lisView.getLastVisiblePosi ...