具有固定部件

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