[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 ...
随机推荐
- JS时间的计算,当前日期加一天或者几天的计算
//alert();//debugger;var newriqi="";var jjd=defaultForm.getCellById(sjyxjid).getText();var ...
- (Spring加载xml时)org.xml.sax.SAXParseException: cvc-elt.1: Cannot find the declaration of element 'beans'.
ApplicationContext ctx = new ClassPathXmlApplicationContext("test.xml");报错 在启动Spring时,报以下错 ...
- ORACLE日期加减【转】
首先,感谢这个作者的辛勤汗水给我们带来的总结,因为日期函数操作对平时的使用真的是很常用,所以收藏一下以作后期使用. 原贴地址:http://www.cnblogs.com/xiao-yu/archiv ...
- PHP HTTP
安装 HTTP 函数是 PHP 核心的组成部分.无需安装即可使用这些函数. PHP HTTP 函数 PHP:指示支持该函数的最早的 PHP 版本. 函数 描述 PHP header() 向客户端发送原 ...
- 堆/栈的比较 以及 malloc/new动态内存的开辟
堆与栈的比较:1.申请方式(1)栈(satck):由系统自动分配.(2)堆(heap):需程序员自己申请(c:调用malloc,realloc,calloc申请 free 来释放),并指明大小,并由程 ...
- js 跨浏览操作
/* 跨浏览器添加事件绑定 obj : 需要绑定js时间的对象 type: 欲绑定的事件类型,如:click ,mounseover 等事件 不需要添加on fn : 触发的脚本*/func ...
- storm-kafka教程
一.原理介绍 本文内容参考:https://github.com/apache/storm/tree/master/external/storm-kafka#brokerhosts (一)使用st ...
- SQL Server 触发器(转)
触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 触发器对表进行插入.更新.删 ...
- 【转】基于jquery的无刷新表格分页
效果图 css样式 <style> html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, ...
- 基于.NET MVC的高性能IOC插件化架构(二)之插件加载原理
上一篇博文简单介绍了下插件化的代码组成部分:http://www.cnblogs.com/gengzhe/p/4390932.html,源码地址:https://github.com/luohuazh ...