How to use Components on Different Routes in React?

Question

How to use Components on Different Routes in React?

I've tried to accomplish it like this, but I get an error:

<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 should have only one child. So you could wrap your elements in a single div, like so:

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