React Router - Come ottenere una navigazione simile a una scheda?

Question

Sono nuovo di React e sviluppo la mia prima applicazione usando React. La mia applicazione aveva un componente di tabulazione con 4 schede e il contenuto di ogni scheda è stato impostato come componente separato. Ora sto sostituendo la scheda con 4 percorsi diversi. Così, mi sono sbarazzato della scheda e ho utilizzato il router di risposta per impostare 4 percorsi, uno per ciascuno dei 4 componenti.

Con le schede, il contenuto di una scheda manterrebbe il suo stato quando si naviga in una scheda diversa e si torna indietro. Ad esempio, supponiamo che la scheda abbia un elenco e che l'utente abbia eseguito lo scorrimento fino alla fine dell'elenco. Se l'utente accede a una scheda diversa e torna indietro, l'elenco rimarrebbe scostato verso il basso. Questo è il comportamento desiderato per la mia applicazione.

Tuttavia, non sono in grado di ottenere questo comportamento con i percorsi. Ho notato che quando navigo da una rotta all'altra, i componenti vengono nuovamente istanziati (non solo resi nuovamente). Posso dire questo perché il costruttore del componente viene chiamato ogni volta che il percorso per il componente diventa attivo.

Desidero ottenere il comportamento di tabulazione. So che per Angular esiste una libreria UI-Router-Extras che fornisce Deep State Redirect (per la navigazione a schede). Funziona davvero bene nel mio progetto Angular. Ma non riesco a trovare un'opzione simile per React. Ho provato react-router e react-router-component ed entrambi istanziano nuovamente un componente quando il suo percorso diventa attivo.

Esiste una soluzione per ottenere un comportamento simile a una tabulazione per i percorsi in React?

Answer 1

Personalmente, ho scelto di abbandonare il router di risposta in questo caso e creare un componente padre con uno stato contenente la scheda corrente da visualizzare, visualizzando solo quella attiva.

Ecco un esempio molto semplice

<div 
     style={{display: this.state.currentTab === 'component_a' ? 'block' : 'none'}} 
    > 
     <ComponentA /> 
    </div> 
    <div 
     style={{display: this.state.currentTab === 'component_b' ? 'block' : 'none'}} 
    > 
     <ComponentB /> 
    </div> 

Answer 2

Hai due opzioni, utilizzare Redux, o mostra/nascondi componenti sulla base di schede.

Ecco un esempio per mostrare/nascondere componenti

{this.state.showAboutMe ? <AboutMeComponent navigation={this.props.navigation} props={this.props.user} /> : undefined}