React-router中有多个子路由

Question

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

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

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

Answer 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.