将参数传递给基本布局路线

Question

我有一个使用 react-router 的 React 应用程序，但我正在为一个简单的功能而苦苦挣扎。我配置了以下路线：

<Router history={hashHistory}>
    <Route path="/" component={Layout}>
        <IndexRoute component={Home}></IndexRoute>
        <Route path="reports" name="reports" component={Reports}></Route>
        <Route path="help" name="help" component={Help}></Route>
    </Route>
</Router>

我的Layout 组件看起来像：

<div class="content-wrapper">
    <section class="content-header">
        <h1>{this.props.title}</h1>
    </section>
    <section class="content" ref="content">
        <div class="content-pad">
            {this.props.children}
        </div>
    </section>
</div>

我想知道如何将this.props.title 传递到这个Layout 组件中。

我尝试了以下方法：

1) 在路线中：

<Route path="reports" name="reports" component={Reports} title="Reports"></Route>

2) 在链接中：

<Link to="reports" title="Reports"><span><i class="fa fa-file"></i> Reports</span></Link>

3) 在带有查询参数的链接中：

<Link to={{ pathname: 'help', query: { title: 'Help' } }}><span><i class="fa fa-question"></i> Help</span></Link>

提前致谢！

Answer 1

试试这个：

<Route path="/" title="my awesome title" component={Layout}>

在布局组件中：

<h1>{this.props.route.title}</h1>