响应路由器的层次结构

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

如果您希望每个路由都包含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>