javascript - react 路由器中的层次结构

Question

我正在学习 React，我尝试创建一些路由，我的入口点上有这段代码:

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'。

有没有办法让 Supervisory Report 中的所有页面都显示相同的组件，而不是在每个组件中为每个路由再次呈现？

Answer 1

如果您希望每条路由都包含 App 内的 SupervisoryReport，则无需在路由中包含此逻辑。我认为修改您的 App 组件的渲染方法会更好:

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>