Impostazione percorso iniziale con router di risposta

Question

Ho una domanda sull'impostazione di percorsi iniziali con router di risposta (in combinazione con Redux). Ho impostato alcune rotte e in base allo stato del mio negozio Redux ho bisogno di reindirizzare sempre l'utente a un determinato percorso al caricamento della pagina.

Il modo in cui i miei percorsi sono attualmente impostate è la seguente:

<Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={App} onEnter={redirectToInitialRoute}> 
      <Route path="/send" component={OverviewPage} /> 
      <Route path="/thanks" component={ConfirmPage} /> 
      <Route path="/:categoryIdentifier" component={CategoryPage} /> 
     </Route> 
    </Router> 
</Provider> 

Ho aggiunto la funzione onEnter al mio percorso di root. L'ho fatto poiché ho sempre bisogno di reindirizzare al caricamento della pagina, indipendentemente dalla pagina in cui l'utente sta inserendo l'app. Il modo in cui la mia funzione onEnter è messa a punto è la seguente:

function redirectToInitialRoute (nextState, replace) { 
    if (condition) { 
     replace('/send'); 
    } 
    else if (anotherCondition) { 
     replace('/thanks'); 
    } 
} 

Tuttavia ciò che accade con questa configurazione, è che (per esempio) 'anotherCondition' è compiuto e reindirizza a '/ grazie'. Poiché onEnter viene passato sulla root route, il redirectToInitialRoute viene nuovamente attivato. Poiché "anotherCondition" è ancora true, il reindirizzamento si verifica nuovamente causando un loop di reindirizzamento.

Mi chiedevo quale sarebbe il modo migliore per risolvere questo problema? Qualsiasi aiuto è molto apprezzato. Grazie in anticipo!

Answer 1

Cosa ne pensi di aggiungere un percorso di indicizzazione e quindi il reindirizzamento sul montaggio?

<Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={App} onEnter={redirectToInitialRoute}> 
      <IndexRoute component={Welcome} />   
      <Route path="/send" component={OverviewPage} /> 
      <Route path="/thanks" component={ConfirmPage} /> 
      <Route path="/:categoryIdentifier" component={CategoryPage} /> 
     </Route> 
    </Router> 
</Provider> 

Poi, nel tuo Benvenuto Componente:

componentDidMount: function() { 
    if (condition) { 
     browserHistory.push('/here'); 
    } else { 
     browserHistory.push('/there'); 
    } 
}