Wie wird die Redirect Component von react-router verwendet, um auf eine dynamisch generierte Route umzuleiten?

Question

Dies ist eine vereinfachte Version meiner Routenkonfiguration. Ich benutze react-router 2.4.0. Gerade jetzt, wenn ich traf die Wurzel ‚/‘ es leitet mich zu ‚Eltern-Route‘:

<Redirect from="/" to="parent-route" /> 
<Route path="/" component={App}> 
    <Route path="parent-route" > 
     <IndexRoute component={SomeComponent1} /> 
     <Route path="child-route-1/:entityId" component={SomeComponent2} /> 
     <Route path="child-route-2/:entityId" component={SomeComponent3} />  
    </Route> 
</Route> 

Aber ich will das Verhalten von Redirect ändern, um eine Kind-Route mit einem konkreten Id Satz zu umleiten. Um genauer sein mag ich so etwas wie diese

<Redirect from="/" to="parent-route/child-route-1/[firstAvailableEntityId]" /> 

Ich habe die Liste aller verfügbaren Einheiten in dem Redux-Speicher tun. Hat jemand eine Idee, wie man Redirect mit Redux-Store kombiniert, um eine dynamische Weiterleitung URL zu generieren?

Ich habe versucht, die Redirect Komponente zu wickeln und es mit dem Speicher verbunden. Aber das funktioniert nicht, weil die Render-Methode von Redirect nie aufgerufen wird.

Answer 1

Sie könnten mit so etwas wie dies versuchen:

import store from './yourStore.js' 

function onIndexEnter (nextState, replace) { 
    const state = store.getState() 
    // put some logic here to decide your new id... 
    replace(`/your-redirect-url/${newId}` 
} 

const routes = (<Redirect onEnter={onIndexEnter} from="/" to="parent-route" /> 
<Route path="/" component={App}> 
    <Route path="parent-route" > 
     <IndexRoute component={SomeComponent1} /> 
     <Route path="child-route-1/:entityId" component={SomeComponent2} /> 
     <Route path="child-route-2/:entityId" component={SomeComponent3} />  
    </Route> 
</Route>) 

Aber ich denke, es wäre einfacher und sauberer kein Redirect in diesem Fall zu verwenden. Stattdessen können Sie Ihre Umleitungslogik in die Komponente componentWillMount Ihrer Top-Level-Komponente oder in den OnEnter-Hook Ihrer Top-Level-Route einfügen. Dort können Sie entscheiden, wo dynamisch umgeleitet werden soll.