We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down through the component tree.

// index.js

ReactDOM.render(
<MuiThemeProvider>
<Router><App /></Router>
</MuiThemeProvider>, document.getElementById('root'));

On the top level, we add Router component to wrap our App component.

export class Router extends Component {
state = {
route: getCurrentPath()
}; handleLinkClick = (route) => {
this.setState({route});
history.pushState(null, '', route);
}; static childContextTypes = {
route: React.PropTypes.string,
linkHandler: React.PropTypes.func
}; getChildContext() {
return {
route: this.state.route,
linkHandler: this.handleLinkClick
};
} render() {
return (
<div>{this.props.children}</div>
);
}
}

We need to pass the props to the children so that Link component can know current url state. To do this, we using 'Context' instead of 'passing the props down to children'.

Becasue there are two problems with this. One, in a complex app, that could potentially mean passing the same item down many levels. This could mean a lot of maintenance if things need to change.

The second problem is that, in this setup, app is being placed inside the router through a call to this.props.children. We can't just add props onto the app component in our render function. The way we're going to handle this is through React's context mechanism.

import React, {Component} from 'react';

const styles = {
padding: '8px'
}; export class Link extends Component { static contextTypes = {
route: React.PropTypes.string,
linkHandler: React.PropTypes.func
}; render() {
const activeClass = this.context.route === this.props.to ? 'active': '';
const handleClick = (ev) => {
ev.preventDefault();
this.context.linkHandler(this.props.to);
}; return (
<a href="#" style={styles} className={activeClass} onClick={handleClick}>{this.props.children}</a>
);
}
} Link.PropTypes = {
to: React.PropTypes.string.isRequired
};

Last, in the Link component, we can use the Context to access what we have defined for Router compoent.

[React] Use React Context to Manage Application State Through Routes的更多相关文章

  1. [Javascript] Manage Application State with Immutable.js

    Learn how Immutable.js data structures are different from native iterable Javascript data types and ...

  2. [React] Keep Application State in Sync with Browser History

    Using pushState and passing route data via context allows our application to respond to route change ...

  3. [React] Update Application State with React Apollo ApolloConsumer Component

    In this lesson I refactor some code that utilizes the Mutation component to update client-side cache ...

  4. React 全新的 Context API

    Context API 可以说是 React 中最有趣的一个特性了.一方面很多流行的框架(例如react-redux.mobx-react.react-router等)都在使用它:另一方面官方文档中却 ...

  5. react中对于context的理解

    一.context旧版的基本使用 1.context的理解 当不想在组件树中通过逐层传递props或state的方式来传递数据时,可使用context来实现跨层级的组件数据传递. 2.context的 ...

  6. React之使用Context跨组件树传递数据

    ---------------------------------  讲解一 原文:https://blog.csdn.net/xuxiaoping1989/article/details/78480 ...

  7. react中的context的基础用法

    context提供了一种数据共享的机制,里面有两个关键概念——provider,consumer,下面做一些key features描述. 参考网址:https://react.docschina.o ...

  8. React.js 的 context

    这一节我们来介绍一个你可能永远用不上的 React.js 特性 —— context.但是了解它对于了解接下来要讲解的 React-redux 很有好处,所以大家可以简单了解一下它的概念和作用. 在过 ...

  9. React 深入系列3:Props 和 State

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...

随机推荐

  1. Spring CORS

    转载:Spring MVC 4.2 增加 CORS 支持 http://spring.io/blog/2015/06/08/cors-support-in-spring-framework http: ...

  2. Warning: Division by zero in 错误处理

    Warning: Division by zero in 错误处理 今天调试一段代码,结果提示 Warning: Division by zero in ,没有扫到答案,最后发现 $dir/$name ...

  3. ubuntu-系统卡慢解决(转载)

    ubuntu系统狠慢 或者很卡的原因 1.  涉及内存小或者虚拟SWAP分区调整问题    可以通过 系统监视器 进行查看      在UBUNTU系统里面,并不是你的物理内存全部耗尽之后,系统才使用 ...

  4. ubuntu-工作环境配置(van)

    我们平时用到的工具主要vim,retag_app,提交代码,以及一些常用命令,他们主要对应一下几个文件 1.vim ->.vimrc 2.代码提交->gitconfig 3.常用命令-&g ...

  5. css的三种表现形式

    1.行内样式(内嵌样式):结构的内部,即写在标签内的样式:写在标签的开始部分内部,style属性当中:<标记 style="样式的属性名1:样式的属性值1:属性名2:属性值2:.... ...

  6. 【2017 Multi-University Training Contest - Team 7 && hdu 6121】Build a tree

    [链接]点击打开链接 [题意] 询问n个点的完全k叉树,所有子树节点个数的异或总和为多少. [题解] 考虑如下的一棵k=3叉树,假设这棵树恰好有n个节点. 因为满的k叉树,第i层的节点个数为k^(i- ...

  7. 微信支付v2开发(3) JS API支付

    本文介绍如何使用JS API支付接口完成微信支付. 一.JS API支付接口(getBrandWCPayRequest) 微信JS API只能在微信内置浏览器中使用,其他浏览器调用无效.微信提供get ...

  8. python3 登录验证小程序,同一用户输错三次密码,锁定账户

    ''' 让用户输入用户名密码 认证成功后显示欢迎信息用户3次认证失败后,退出程序,再次启动程序尝试登录时,还是锁定状态''' # !/usr/bin/env python # -*- coding:u ...

  9. x=min(x, y)

    x = min(x, y); ⇒ 当然 y 会有多个值传递进来 minHeight = min(minHeight, h[i]); 置于循环之中,不断将当前得到的最小高度值和新加入进来的值进行比较: ...

  10. apache与IIS共用80端口冲突解决方法

    如果同一台电脑安装了apache和iis,会提示80端口冲突,如何解决apache与iis 80端口冲突的问题呢,并且同时使用apache和iis 将apache设为使用80端口,IIS使用其它端口, ...