Question

我定义了一些路线：

render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={IndexContainer} />
            <Route path="/agence" headerWhite={true} component={AgencyContainer} />
        </Route>
    </Router>
), document.getElementById('app'));

如您所见，我在headerWhite={true}路线上有一个道具/agence。我可以通过AgencyContainer在我的this.props.route.headerWhite组件中访问它。但我想要的是能够在我的App组件中访问它。有一个简单的方法吗？

我想要实现的是将headerWhite道具传递给我Header组件中呈现的App组件，因为它必须位于网站的每个页面上。< / p>

非常感谢。

Answer 1

我通过执行以下操作解决了问题：

import React from 'react';
import Page from './Page';
import Header from './Header';

function getCurrentRoute(router, routes) {
    const currentRoute = routes.filter(route => route.path && router.isActive(route.path, true));

    return currentRoute[0];
}

function App(props, context) {
    const currentRoute = getCurrentRoute(context.router, props.routes);

    return (
        <Page>
            <Header headerWhite={currentRoute.headerWhite} />
            {props.children}
        </Page>
    )
}

App.contextTypes = {
    router: React.PropTypes.object.isRequired
};

export default App;

尽管如此，它解决了我的问题，但我不知道有更好的方法。所以如果有人有更好的解决方案，请给它，我会接受你的回答！

React router - 在绑定组件之外获取路由prop

1 个答案: