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>