Redux + Reagieren: reagiere Router nur Rendering Index Route

Question

Ich habe versucht, die Antwort auf this question, aber ohne Erfolg. Ich versuche zu verwenden, reagiere Router und verschachtelte Routen, um unterschiedliche Layouts abhängig von der Konfiguration des Routers zu rendern. Aber die Route mit path="/" zeigt immer unabhängig von der URL, die vorhanden ist. Hier ist der Router, den ich verwende.

 <Route component={App}> 
      <Route component={LayoutOne}> 
       <Route path="/" component={ComponentOne}/> 
      </Route> 
      <Route component={LayoutTwo}> 
       <Route path="category" component={ComponentTwo}/> 
      </Route> 
     </Route> 

Und hier ist die App-Datei, die ich verwenden, um den Versand zu den Requisiten zuordnen und verbinden.

function mapStateToProps(state, ownProps){ 
    return{ 
     exampleProp: state.exampleProp, 
    }; 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators(actionCreators, dispatch); 
} 


const App = connect(mapStateToProps, mapDispatchToProps)(MainLayout); 

export default App; 

Hier ist das Hauptlayout MainLayout wie oben zu sehen.

LayoutOne und LayoutTwo (wurde der Kürze halber weggelassen) sind einfache Klassenrapper wie folgt.

Exportstandardklasse LayoutOne erweitert Komponente { render() { return ( {this.props.children} ) } }

Und hier die ComponentOne und ComponentTwo jeweils nur einfache Komponenten .

Mein Problem ist, dass nur ComponentOne rendert, unabhängig davon, welche URL vorhanden ist. Wie behebe ich dieses Problem, damit ich verschachtelte Routen verwenden kann, wie oben gezeigt? Ihre Hilfe würde sehr geschätzt werden. Wenn Sie weitere Informationen benötigen, wenden Sie sich bitte und ich werde mein Bestes tun, um die Frage mit den erforderlichen Informationen zu aktualisieren. Danke.

Answer 1

Das Problem, das Sie haben, ist, dass die Indexroute, d. H. '/', zuerst in Ihrem Routenbaum gefunden wird, und weil es mit jeder Route übereinstimmt, ist es die Route, die jedes Mal gerendert wird.

Sie können dies beheben, indem Sie die Route mit path="category" über die mit path="/" verschieben. Auf diese Weise wird zuerst die detailliertere Routenoption geprüft. Ich würde auch empfehlen, path="category" zu path="/category" nur aus Gründen der Klarheit zu ändern, da beide Routen auf Root-Ebene sind.

Answer 2

Ändern Sie Ihre Routen wie folgt aussehen sollte Ihr Problem

<Route component={App} path="/"> 
    <Route component={LayoutOne} path=""> 
     <Route component={ComponentOne}/> 
    </Route> 
    <Route component={LayoutTwo} path="category"> 
     <Route component={ComponentTwo}/> 
    </Route> 
</Route>