这篇文章主要介绍react Router定义路由之后如何传值，有关React和React Router
1、props.params
使用React router定义路由时，我们可以给指定一个path，然后指定通配符可以携带参数到指定的path：
<Route path='/user/:name' component={UserPage}></Route>跳转UserPage页面时，可以这样写：
//link方法
<Link to="/user/sam">用户</Link>
//push方法
this.props.history.push("/user/sam");在UserPage页面中通过 this.props.params.name 获取值。
上面的方法可以传递一个或多个值，但是每个值的类型都是字符串，没法传递一个对象,如果要传的话可以将json对象转换为字符串，传递过去之后再将json字符串转换为对象。
let data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
let path = '/user/${data}';
//在页面中获取值时
let data = JSON.parse(this.props.params.data);2、query
query方式可以传递任意类型的值，但是页面的URL也是由query的值拼接的，URL很长且是明文传输。
//定义路由
<Route path='/user' component={UserPage}></Route>
//数据定义
let data = {id:3,name:sam,age:36};
let path = {
pathname: '/user',
query: data,
}
//页面跳转
<Link to={path}>用户</Link>
this.props.history.push(path);
//页面取值
let data = this.props.location.query;
let {id,name,age} = data;3、state
state方式类似于post，依然可以传递任意类型的数据，而且可以不以明文方式传输。
//定义路由
<Route path='/user' component={UserPage}></Route>
//数据定义
let data = {id:3,name:sam,age:36};
let path = {
pathname: '/user',
state: data,
}
//页面跳转
<Link to={path}>用户</Link>
this.props.history.push(path);
//页面取值
let data = this.props.location.state;
let {id,name,age} = data;以上就是react router中页面传值的三种方法。
如何优雅的设计 React 组件
如今的 Web 前端已被 React、Vue 和 Angular 三分天下，尽管现在的 jQuery 已不再那么流行，但 jQuery 的设计思想还是非常值得致敬和学习的，特别是 jQuery 的插件化。
React深度编程：受控组件与非受控组件
受控组件与非受控组件在官网与国内网上的资料都不多，有些人觉得它可有可不有，也不在意。这恰恰显示React的威力，满足不同规模大小的工程需求。
React框架学习_关于React两种构建应用方式选择
一般在传统模式下，我们构建前端项目很简单。就是下载各种js文件，如JQuery、Echart等，直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。
Gatsby.js_一款基于React.js静态站点生成工具
Gatsby能快速的使用 React 生态系统来生成静态网站，可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。
React创建组件的三种方式及其区别
React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件
react生命周期详解_深入理解React生命周期
React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期，它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,，表示有限个状态以及在这些状态之间的转移和动作行为的模型。
React + Webpack 构建打包优化
React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库，去除 import 引用,按需打包所用的类库，比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面：构建速度慢,打包后的文件体积过大
react 高阶组件的 理解和应用
react 高阶组件简单的理解是：一个包装了另一个基础组件的组件。高阶组件的两种形式：属性代理（Props Proxy）、反向继承 (Inheritance Inversion)
react中的refs属性的使用方法
React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例
react-router v4 按需加载的配置方法
在react项目开发中，当访问默认页面时会一次性请求所有的js资源，这会大大影响页面的加载速度和用户体验。所以添加按需加载功能是必要的，以下是配置按需加载的方法
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!