Initialroute mit react-router setzen

Question

Ich habe eine Frage zum Einrichten von initialen Routen mit react-router (in Kombination mit Redux). Ich habe ein paar Routen eingerichtet und basierend auf dem Status von meinem Redux-Shop muss ich den Benutzer immer auf eine bestimmte Route beim Laden der Seite umleiten.

Die Art und Weise meine Routen zur Zeit eingestellt ist wie folgt aufgebaut:

<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> 

ich die onEnter Funktion meiner Wurzel Route hinzugefügt haben. Ich habe dies getan, da ich beim Seitenladen immer umleiten muss, unabhängig davon, auf welcher Seite der Benutzer die App eingibt. Die Art und Weise meine onEnter Funktion Setup ist wie folgt:

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

jedoch, was mit diesem Setup geschieht, ist, dass (zB) ‚anotherCondition‘ erfüllt ist und leitet auf ‚/ Dank‘. Da der onEnter auf der root-Route übergeben wird, wird die redirectToInitialRoute erneut ausgelöst. Da die 'anotherCondition' immer noch wahr ist, tritt die Umleitung erneut auf und verursacht eine Umleitungsschleife.

Ich fragte mich, was wäre der beste Weg, um dieses Problem zu lösen? Jede Hilfe wird sehr geschätzt. Danke im Voraus!

Answer 1

Wie wäre es, eine Indexroute hinzuzufügen und dann auf mount umzuleiten?

<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> 

Dann in Ihrem Welcome Komponente:

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