Percorsi nidificati in React Router v4

Sto provando a impostare alcuni percorsi nidificati per aggiungere un layout comune. Controlla il codice:

  

Mentre funziona perfettamente, ricevo comunque l’avviso:

Avvertenza: non utilizzare e nello stesso percorso; sarà ignorato

La risposta di CESCO rende prima il componente AppShell quindi uno dei componenti all’interno di Switch . Ma questi componenti NON renderanno all’interno di AppShell , NON saranno figli di AppShell .

Nella v4 per avvolgere i componenti non inserisci più la tua Route in un’altra Route , metti i tuoi Route direttamente all’interno di un componente.
IE: per il wrapper invece di si utilizza direttamente .

Codice completo:

        

Il cambiamento è probabilmente spiegato dall’idea di rendere React Router v4 puro React in modo da utilizzare solo elementi React come con qualsiasi altro elemento React.

EDIT: ho rimosso il componente Switch in quanto non è utile qui. Vedi quando è utile qui .

È necessario utilizzare il componente interruttore per nidificare per funzionare bene. Inoltre, vedi questa domanda

 // main app 
// not setting a path prop, makes this always render

E i componenti della versione 4 non prendono i bambini, invece, dovresti usare l’object di rendering.

  { return 
Whatever
}>

Provare:

       

Se non vuoi che Layout venga eseguito al momento del caricamento. Usa questo metodo:

 

Ogni volta che la cronologia cambia, verrà eseguito componentWillReceiveProps in ChatList.

Puoi anche provare questo:

 ( 
)} />