反应路由器中的层次结构

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

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

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

        </Route>

Answer 2

如果您希望每条路由都包含 App 内部的 SupervisoryReport，则不需要在路由中包含此逻辑。我觉得修改你的App组件的render方法会更好：

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>

反应路由器中的层次结构

hierarchy in react Router

javascript

reactjs

react-router