Как использовать компоненты на разных маршрутах в React?

Question

Как использовать компоненты на разных маршрутах в React?

Я пытался выполнить это так, но я получаю сообщение об ошибке:

<Router>
    <App>
        <Route exact path='/registro' component={Registro}/>
        <Route exact path='/registrar' component={Registrar}/>
        <Route exact path="/home" component={Home} />
    </App>
    <Route exact path="/login" component={Login} />
</Router>,

document.getElementById('root'));

App:

render() {
  const { children } = this.props;

  return (
    <div>
      {children}
    </div>
  );
}

Answer 1

Router должен иметь только одного ребенка. Таким образом, вы можете обернуть свои элементы в один div, например:

<Router>
  <div>
    <App>
      <Route exact path='/registro' component={Registro}/>
      <Route exact path='/registrar' component={Registrar}/>
      <Route exact path="/home" component={Home} />
    </App>
    <Route exact path="/login" component={Login} />
  </div>
</Router>