React-router 中的多个子路由答案

【问题标题】：Multiple child routes in React-routerReact-router 中的多个子路由
【发布时间】：2015-09-06 07:12:11
【问题描述】：

我正在尝试实现一个路由器，其中一个 Route 有两个并行/独立的子路由，我想知道 react-router 是否可以做到这一点。下图说明了我想要实现的目标。它表示具有两个组件的事件编辑器：（1）事件列表（2）一个事件的编辑器。我认为它们的状态都应该以某种方式成为 URL 的一部分。

一个额外的限制：[child1] 应该知道[child2] 的状态，因为它需要以不同的颜色显示当前正在编辑的项目。

如果react-router 无法做到这一点，您将如何实现？谢谢！

【问题讨论】：

只有/app/child2 路由不是更有意义吗？您草图中的child2 似乎是event 的所有者？此外，对我来说，calendar/:date 和 list/:showHistory/:filter 似乎是后端相关的 API 调用，而不是客户端路由器应该处理的东西。如果您使用的是 Flux 架构，那么我会将其推理为操作而不是路由。
@limelights，问题是我还想通过浏览器的后退按钮等来处理 child1 中的更改。或者这也可以通过其他方式进行吗？我对通量不是很熟悉。我不知道什么是“行动”。我使用 Meteor 作为后端。 (github.com/reactjs/react-meteor)
嗯，我认为/search/ 是一个完全新的孩子，而不是child1 的一部分，所以/search?q=MyMeetupGroupEvent&type=child1（如果你明白我是什么） get at) 将呈现child3 和/list/ 作为您可以对child1 执行的操作，这也将呈现在child3 中。
嗯，我对/search 的意思实际上只是显示事件列表的另一种方式。这是我正在重写的旧应用程序的两个插图：postimg.org/image/w911n3ypn postimg.org/image/jpe36qaxz
看你的图片我仍然认为child2 是所有者，其他只是你可以采取的行动。但是，通过查看它们，您可以清楚地看到您想要一个日历视图和一个列表视图。所以这样的事情是为了确定child2/listview/ 和child2/calendar 将是为了你的路线。

标签： javascript reactjs react-router

【解决方案1】：

看这个。通过这样做，您可以创建路由的并行控制，而不会损害根。

/**at index.html*/
< div id="root"></div>
< div id="helper"></div>

/**at index.js*/
ReactDOM.render(
  (
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  ),
  document.getElementById('root')
);

ReactDOM.render(
  (
    <BrowserRouter>
      <Helper />
    </BrowserRouter>
  ),
  document.getElementById('helper')
);


/**at Component Helper*/
render() {
    const location = { pathname: '/2' }
    return (<Switch location={location}>
      <Route exact path='/2' component={Welcome} />
    </Switch>);
}

const Welcome = () => <h3>welcome helper</h3>

//I'm using router V4 to switch of the routers.

【讨论】：

请解释一下为什么您的代码可以解决问题。因此，其他人可以从中学习。