ngokevin/react-router-reverse

How to correct proxy `props.routes` to children components?

Closed this issue · 1 comments

How to correct proxy props.routes to all children components without routes={this.props.routes} in all links and all components.

Current solution is so bad:

// routes_fix.js
export default {
    _routes: [],
    set (routes) {
        this._routes = routes;
    },

    get() {
        return this._routes;
    }
}
// app.jsx
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import routesFix from 'lib/routes_fix';

class App extends Component {
    componentWillMount() {
        routesFix.set(this.props.routes);
    }

    render() {
        return this.props.children;
    }
}

export default connect(state => state)(App);
// link.jsx
import React, { PropTypes, Component } from 'react';
import { Link as OldLink } from 'react-router';
import { reverse } from 'react-router-reverse';
import routesFix from 'lib/routes_fix';

class Link extends Component {
    static propTypes = {
        to: PropTypes.string.isRequired,
        params: PropTypes.object
    };

    render() {
        const { to, params, parentPath } = this.props;
        return <OldLink to={reverse(routesFix.get(), to, params, parentPath)}>
            {this.props.children}
        </OldLink>;
    }
}

export {
    Link,
}

Problem solved:

    static childContextTypes = {
        routes: React.PropTypes.array
    };

    getChildContext() {
        return {routes: this.props.routes};
    }

in grandparent component