[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 ...
随机推荐
- Eclipse 导入项目乱码问题(中文乱码)
1.编码不对 a.对某文件或某工程更改编码: 鼠标移到工程名或文件名,右键->Properties->Resource->Text file enCoding ->更改编码 ...
- BeanUtils--内省加强
BeanUtils就是一个处理Bean的工具包.内部也是使用内省.但对内省做了加强. Bean的set |get不用再成对出现 核心类: BeanUtils. 1.导包
- Delphi之TreeView
TreeView是Delphi中使用频率比较高的一个控件,虽然使用次数很多,但总结不够.借着这次做GDW原型的机会总结一下,写的过程中也会参考网上的博文. TTreeView.TTreeNodes和T ...
- win7下搭建nginx+php的开发环境
本来在win7下用的是IIS做web服务器,但近来因项目需求的原因,需要在服务器遇到404错误的时候自动做转向(不是在客户端的跳转,而是在服务器收到客户端请求去某目录下读取文件返回时,如果发现目录或目 ...
- python笔记——第二天
早上6:40起床,睡眼惺忪,学学代码提提神.学完了条件语句. input函数输入值为字符串,处理前转化为int()或float()或其他. if else elif 注意书写格式,否则容易出现synt ...
- 使用minidwep-gtk-PJ-wifi教程中文版
- 转:VmWare下安装CentOS6图文安装教程
文章来自于:http://www.cnblogs.com/seesea125/archive/2012/02/25/2368255.html 查看文章索引请通过http://www.cnblogs.c ...
- Vector3.Dot 与Vector3.Cross
Vector3.Dot(点积) : 点积的计算方式为: a·b=|a|·|b|cos<a,b>; 其中<a,b>和<b,a> 夹角不分顺序; 物理学中点积用来计算 ...
- PHP 访问类中的静态属性
静态属性和普通属性不一样,静态属性只属于类本身而不属于类的任何实例,所以他们的访问方式也不一样.你可以把静态属性认为是存储在类当中的全局变量,而且你可以在任何地方通过类来访问它们. 在类本身中访问静态 ...
- ural 1348 Goat in the Garden 2
http://acm.timus.ru/problem.aspx?space=1&num=1348 #include <cstdio> #include <cstring&g ...