反应路由器中的层次结构

Question

我正在学习反应，我尝试创建一些路由，我的入口点上有以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router';
import App from './app/Components/AppComponent';
import SupervisoryReport from './app/Components/SupervisoryReportComponent';
import Topmenu from './app/Components/TopmenuComponent';
ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={SupervisoryReport} />
            <Route path="test">
            </Route>
        </Route>
    </Router>,
    document.getElementById('app')
);

这工作正常。我现在需要的是当我导航到/test时，仍然呈现监督报告，并添加一些内容。但显然，它只渲染当前路线内的内容，而不是上层路线。

知道怎么做吗？

编辑

下面更解释我想做什么：

假设我有一个路由/supervisory-report里面有 20 页，例如：/supervisory-report/page-1、/supervisory-report/page-2 等

每个页面都必须有一个组件。

然后我还有其他一些路线，例如"/test"。

有没有办法让监督报告中的所有页面显示相同的组件，而不是在每个路由的每个组件中再次呈现？

Answer 1

如果您希望每个路由都包含App内的SupervisoryReport，则不需要在路由中包含此逻辑。 我认为最好修改应用程序组件的渲染方法：

return (
    <div>
        <SupervisoryReport>
            {this.props.children} // if you want the component to be inside
        </SupervisoryReport>
        {this.props.children} // if you want the component to be after
    </div>);

然后，您的路由可以简化为：

<Route path="/" component={App}>
    <Route path="test" component={TestComponent} />
</Route>

我认为只有在您计划在路由更改时将其换出时才有意义，则仅在路由配置中包含SupervisoryReport。 如果是这种情况，您可以尝试如下操作：

<Route path="/" component={App}>
    <Route path="other" component={OtherComponent}/>
    <Route path="*" component={SupervisoryReport}>
        <Route path="test" component={TestComponent} />
    </Route>
</Route>

请注意，您必须将 * 路径放在最后，因为 react 一旦找到匹配项就不会检查任何路由。

编辑：为了解决您的问题，我会尝试以下方法：

<Route path="/" component={App}>
    <Route path="test" component={TestComponent}/>
    <Route path="supervisory-report" component={SupervisoryReport}>
        <Route path="page-1" component={PageOneComponent}/>
        <!-- etc -->
    </Route>
</Route>

Answer 2

从您的代码来看，似乎没有附加到路径"test"的组件。您的路线应该是这样的

 <Route path="/" component={App}>
            <IndexRoute component={SupervisoryReport} />
            <Route path="test" component={TestComponent}/>
        </Route>