react-router - react router ejemplo

Rutas anidadas en React Router v4

Question

Estoy tratando de configurar algunas rutas anidadas para agregar un diseño común. Mira el código:

  <Router>
    <Route component={Layout}>
      <div>
        <Route path=''/abc'' component={ABC} />
        <Route path=''/xyz'' component={XYZ} />
      </div>
    </Route>
  </Router>

Si bien esto funciona perfectamente bien, sigo recibiendo la advertencia:

Advertencia: no debe usar <Componente de ruta> y <Niños de ruta> en la misma ruta; será ignorado

Answer 1

Debe usar el componente de conmutación para anidar para que funcione bien. Además, vea esta question

// main app
<div>
    // not setting a path prop, makes this always render
    <Route component={AppShell}/>
    <Switch>
        <Route exact path="/" component={Login}/>
        <Route path="/dashboard" component={AsyncDashboard(userAgent)}/>
        <Route component={NoMatch}/>
    </Switch>
</div>

Y los componentes de la versión 4 no aceptan niños, en su lugar, debe usar el accesorio de render.

<Router>
    <Route render={(props)=>{
      return <div>Whatever</div>}>
    </Route>
  </Router>

Answer 2

La respuesta de CESCO muestra primero el componente AppShell luego uno de los componentes dentro de Switch . Pero estos componentes NO se renderizarán dentro de AppShell , NO serán hijos de AppShell .

En v4 para envolver componentes, ya no coloca sus Route dentro de otra Route , coloca sus Route directamente dentro de un componente.
IE: para la envoltura en lugar de <Route component={Layout}> utiliza directamente <Layout> .

Código completo:

  <Router>
    <Layout>
      <Route path=''/abc'' component={ABC} />
      <Route path=''/xyz'' component={XYZ} />
    </Layout>
  </Router>

El cambio probablemente se explica por la idea de hacer que React Router v4 sea puro React para que solo use elementos React como con cualquier otro elemento React.

EDITAR: eliminé el componente Switch ya que no es útil aquí. Vea cuándo es útil here .

Answer 3

Si no desea que Layout ejecute en cargado. Usa este método:

<div className="container">
    <Route path="/main" component={ChatList}/>
    <Switch>
        <Route exact path="/" component={Start} />
        <Route path="/main/single" component={SingleChat} />
        <Route path="/main/group" component={GroupChat} />
        <Route path="/login" component={Login} />
    </Switch>
</div>

Cada vez que cambie el historial, se ejecutará componentWillReceiveProps en la ChatList.

Answer 4

También puedes probar esto :

<Route exact path="/Home"
                 render={props=>(
                                 <div>
                                      <Layout/>
                                      <Archive/>
                                </div>
                       )} 
    />

Answer 5

Tratar:

<Router>
    <Layout>
        <Route path=''/abc'' component={ABC} />
        <Route path=''/xyz'' component={XYZ} />
    </Layout>
</Router>