层次的反应路由器

我学反应，我试图创造一些路线，我有这样的代码对我的切入点：层次的反应路由器

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等

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

然后我有一些其他路线，如'/测试'。

有没有一种方法可以让监控报告中的所有页面显示相同的组件，而不是在每个组件中为每个路径再次渲染？

来源

2016-03-01 Pablo

如果要包含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>

注意，您必须终于有*路径，反应不会检查任何路线，一旦它找到一个匹配。

编辑：为了解决你的问题，我会尝试这样的：

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

来源

2016-03-01 14:48:53

请检查我的编辑，也许它会解释更好 – Pablo

从您的代码看来，没有任何组件连接到路径“测试”。你的路线应该是这样的

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

     </Route>

来源

2016-03-01 14:41:04 pitaside

是的，我试过了，但在这种情况下，只有''将在TestComponent'负载/ test'，而不是SupervisoryReport – Pablo

SupervisoryReport是您的IndexRoute，它与路径“/”匹配，您可以更详细地解释您想实现的目标。 – pitaside

层次的反应路由器

回答

相关问题