[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 ...
随机推荐
- servlet方式通过Cookie记住登录时的用户名和密码
1.建立web工程 2.创建存放servlet的包 3右键包,新建servlet,路径将前面的servlet去掉,只需要doPost和doGet方法 编写servlet CookieServlet.j ...
- 类名.this与类名.class
1..当在内部类中使用this指的就是内部类的对象, 为了访问外层类对象,就可以使用外层类名.this来访问. 2.在java中,每个class都有一个相应的Class对象,当编写好一个类,编译完成后 ...
- eclipse - An internal error occurred during: "Running Android Lint"
概述 也不晓得为什么,编译eclipse,设置打开,就自动报错: An internal error occurred during: "Running Android Lint" ...
- java对象初级知识
this属于类 方法中没有自己的this指针(本来以为js方法中有,其实并没有里,那是被new出来的function 在声明的时候可以赋初值: int a =12 但不能 int a ; a ...
- jq实现鼠标经过图片翻滚效果
短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果! html结构: <ul class="list" ...
- 在windows下搭建linux-c学习环境
下载virtualbox并安装: https://www.virtualbox.org/wiki/Downloads 现在vagrant并安装: https://www.vagrantup.com/d ...
- ES6-2
向ES6看齐,用更好的JavaScript(二) 上一篇 中介绍了关于变量部分的新特性,本篇将从现有对象的拓展来展开介绍 1 增加了模板字符串 先看一下,ES6之前我们是如何实现输出模板的: do ...
- sitecore(key\value\language)的灵活应用
1.当我们在做网站的时候是否会因为一个页面的文字变动来回改变.这样的麻烦sitecore都帮我们解决了. 2.sitecore分类key和value和语言几个维度.不同的key会因为不同的语言显示不同 ...
- 使用minidwep-gtk-PJ-wifi教程中文版
- 转:iOS 7人机界面准则
原文来自于:http://www.infoq.com/cn/news/2014/02/ios-ui-design Apple官方推出的“iOS人机界面准则”一直被iOS开发者奉为绝对的设计参考宝典,特 ...