具有固定部件

Question

在下面的路由嵌套路線：

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> 
); 
}; 

我想有上述其他成分（標籤）的Account組件。標籤將根據其路線加載，但Account始終存在，除了在/login頁面。

但我得到的是：

• 在/login我得到預期Login作爲。
• 在/main/tab1和/main/tab2我只得到Account並且選項卡組件不呈現。

月的問題是：

• 我做錯了嗎？
• 有沒有一種方法，我可以寫這個沒有定義Main組件？

謝謝

Answer 1

你在組件點路線/tab1和/tab2但您的網址是/main/tab1或/main/tab2。你必須以/main爲前綴。這不會自動發生。一種方法是給你的對手對象傳遞給你的Main組件，並使用模板字符串前綴您path，這總比萬一硬編碼你改變你的URL到Main組件：

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> 
); 
};