javascript - 由子路由和在其之上渲染的页面驱动的react-router基础组件

Question

我想要一个 HomeComponent，这是应用程序的主/主页 View 。 它包含一个map 和一个所选 map 标记的详细信息div。 map 和详细信息 div 中显示的项目应由路线驱动。

/cities 应显示城市 /houses 应显示房屋

在我看来，定义主视图显示内容的路由是主视图的子路由。

<Route component={HomeComponent}>
  <Route path="/cities" component=Overview scope="cities">
    <Route path=":id" component=Detail scope="cities"/>
  </Route>
  <Route path="/homes" component=Overview scope="homes">
    <Route path=":id" component=Detail scope="homes"/>
  </Route>
</Route>

scope 是 HomeComponent UI 的哪些部分以不同方式突出显示或呈现的指示器。它可能是从 location.pathName 中提取的，但如果路由路径发生变化，这就会中断。

因此，HomeComponent 需要访问其子路由组件 props.items 以了解要在 map 和 detail div 中呈现的内容？

此外，应该有在主视图顶部呈现的路由(使用页面转换)。主视图应该始终出现在 DOM 中，因为重新创建的成本很高。我应该在哪里放置这样的路线，以便可以使用 ReactCSSTransitionGroup 组件对进入/退出进行动画处理？

应用程序主视图应始终显示 homes 或 cities 并在其之上呈现任何其他路线。我是否需要一个中间组件作为 Home 路由的子组件来实现这一目标？

此类附加路线可能是:

<Route path="/about">
  <Route path="/info">
  <Route path="/contact">
</Route>

它们应该呈现在 HomeComponent 之上(绝对)，并且可以是半透明的或具有进入或退出动画。

Answer 1

给你的 HomeComponent 一个带有作用域变量的路径怎么样？您需要监听 componentDidUpdate 或 componentWillReceiveProps 中范围的变化，以根据哪个范围处于事件状态来更新 HomeComponent。您可以通过 props 将范围传递给子组件。

如果您使用这种方法，可能不再需要概述(因为它可以在 HomeComponent 中呈现)，但可能类似于:

<Route path="/:scope" component={HomeComponent}>
   <Route path="overview" component={Overview} />
   <Route path=":id" component={Detail} />
</Route>

如果您希望信息/联系页面的 URI 为根级别，但仍呈现在 HomeComponent 之上，则可以使用绝对路径 ( react-router docs )，例如:

<Route path="/:scope" component={HomeComponent}>
   <Route path="overview" component={Overview} />
   <Route path=":id" component={Detail} />
   <Route path="about" component={About}> 
       <Route path="info" component={Info} />
       <Route path="contact" component={Contact} />
   </Route>
</Route>