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等

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

然后我还有其他一些路线，比如＆＃39; / test＆＃39;。

是否有办法让监督报告中的所有页面显示相同的组件，而不是在每个组件的每个组件中再次渲染？

Answer 1

如果您希望每个路由都包含SupervisoryReport内的App，则您不需要在路由中使用此逻辑。我认为修改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>

请注意，您必须将* path设置为last，因为一旦找到匹配项，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

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

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

        </Route>

响应路由器的层次结构

2 个答案: