Nested Route mit einer festen Komponente

Question

Im folgende Routing:

const Main = props => (
    <main className=''> 
    <Account {...props.account}></Account> 
    <Route path="/tab1" component={Tab1}/> 
    <Route path="/tab2" component={Tab2}/> 
    </main> 
); 

const App = (props) => { 
    const state = props.store.getState(); 
    return (
    <Router history={browserHistory}> 
     <section > 
     <Route path="/main" render={() => (<Main account={state.account} />)} /> 
     <Route path="/login" component={Login} /> 

     <Link to='/login'>Login</Link> 
     <Link to='/main/tab1'>Tab1</Link> 
     <Link to='/main/tab2'>Tab2</Link> 
     </section> 
    </Router> 
); 
}; 

Ich will die Account Komponente über andere Komponenten (tabs) haben. Tabs laden basierend auf ihrer Route aber Account ist immer da, außer in /login Seite.

Aber was ich bekommen ist:

• In /login ich die Login wie erwartet bekommen.
• In /main/tab1 und /main/tab2 bekomme ich nur Account und Registerkarte Komponenten nicht rendern.

Mai Fragen sind:

• Was mache ich falsch?
• Gibt es eine Möglichkeit, dass ich dies schreiben kann, ohne Main Komponente zu definieren?

Danke

Answer 1

Ihre Routen in der Komponente Punkt /tab1 und /tab2 aber Ihre URL ist /main/tab1 oder /main/tab2. Sie müssen ihnen /main voranstellen. Dies geschieht nicht automatisch. Eine Möglichkeit wäre, zu Ihrem Spiel-Objekt zu Ihrem Main Komponente zu übergeben und Ihre path mit einem Template-String-Präfix, das ist besser, als es bei hartzucodieren Sie Ihre URL zum Main Komponente ändern:

const Main = props => (
    <main className=''> 
    <Account {...props.account}></Account> 
    <Route path={`${props.match.url}/tab1`} component={Tab1}/> 
    <Route path={`${props.match.url}/tab2`} component={Tab2}/> 
    </main> 
); 

const App = (props) => { 
    const state = props.store.getState(); 
    return (
    <Router history={browserHistory}> 
     <section > 
     <Route path="/main" render={({match}) => (<Main match={match} account={state.account} />)} /> 
     <Route path="/login" component={Login} /> 

     <Link to='/login'>Login</Link> 
     <Link to='/main/tab1'>Tab1</Link> 
     <Link to='/main/tab2'>Tab2</Link> 
     </section> 
    </Router> 
); 
};