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>

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

1 个答案: