[React] Use React Context to Manage Application State Through Routes

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.