Question

假设以下路线设置：

ReactDOM.render(  
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/">
                <Route component={Layout} onEnter={checkIndexAuthorization(store)}>
                    <IndexRoute component={Home} />
                    <Route path="/home" component={Home} />
                </Route>

                <Route component={AuthLayout} onEnter={checkLoginAuthorization(store)}>
                    <Route path="/login" component={Login} />
                </Route>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root'),
)

如您所见，有两种主要布局，即普通Layout和登录页面AuthLayout。正常布局适用于适当的应用程序。

下面，您可以看到Layout组件文件：

//========================================
// IMPORTS
//========================================

import React, { PropTypes } from 'react';

//========================================
// COMPONENT
//========================================

const Layout = props => (
    <main className="app">
        <header>
            {props.sectionTitle}
        </header>

        <section>
            {props.children}
        </section>

        <footer>

        </footer>
    </main>
)

Layout.propTypes = {
    children: PropTypes.node,
    sectionTitle: PropTypes.string // <-- not being set anywhere currently
}

//========================================
// EXPORTS
//========================================

export default Layout;

现在，该布局顶部有一个标题部分，需要根据我们在应用中的位置显示文字。

由于我是React JS的新手，我不想只是查看“如何从路由器传递道具”或类似内容 - 相反，我对正确的方式感兴趣这样做可能会。 “反应方式”，如果你愿意的话。这是否涉及直接从路径传递道具，或改变某种影响标题的全局状态，或者处理此场景的“正确”方式。

编辑：我应该提一下，我正在使用React JS v.15.6.1和react-router v.3.0.5。

Answer 1

您必须更新所有子组件以获得其他属性“title”。如需更新Home组件，如下所示

Home.title = "HomePage";

export default Home

现在更新您的路线以将此信息作为道具传递

<Route component={Layout} onEnter={checkIndexAuthorization(store)}>
     <IndexRoute component={Home} />
     <Route path="/home" component={Home} title={Home.title} />
</Route>

现在，在布局组件中，您可以从下面的子道具

中访问它

<header>
    {props.children.route.component.title}
</header>

Answer 2

如果我正确理解您要实现的目标是获取动态组件/页面的名称如果是这种情况，您可以在路线中添加名为name的道具并将其抓取到组件内部例如：

 <Route path="/" name="App" component={App}>
  <IndexRoute name="Home Page" component={HomePage} />
  <Route path="/home" name="Home Page" component={HomePage} />
  <Route path="/about" name="About Page" component={AboutPage} />
  <Route path="*" component={NotFoundPage} />
</Route>

在组件内部，这是如何获取名称：

render() {
// ...
    const currentRouteName = this.props.routes[this.props.routes.length - 1].name;
// ... rest of code

Answer 3

我也正在查看此内容-在我的应用程序中，我有专用路由，这些路由仅在身份验证之后可用，我只有在查看此内容大约5分钟后才记住！

如果您要在应用程序中创建私人路线，请不要忘记将道具传递给新创建的路线组件，例如：

<PrivateRoute path="/path/to/route" name={'Route name'} component={RouteComponent} layout={SimpleLayout} />

以及PrivateRoute的定义：

const PrivateRoute = ({ layout: Layout, component: Component, ...rest }) => (
    <Route {...rest} render={props => {
        const newComponent = Layout ? 
             <Layout><Component {...rest} {...props} /></Layout> 
                 : 
             <Component {...props} />;

        return Auth.isUserAuthenticated() ? (
            newComponent
        ) : (
            <Redirect to={{pathname: '/login', state: { from: props.location }}} />
        )
    }}/>
);

重要的是要记住将当前的道具传播到新的组件{... rest}上。

然后在实际的Layout文件（例如上面的SimpleLayout）中，您可以通过以下方式访问道具：

this.props.children.props.name

我确定还有更好的方法，但是根据我到目前为止的经验，这对我来说还行！

如何将props传递给react-router中使用的布局？

3 个答案: