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前面加上模板字符串，这比硬编码更好，以防您将网址更改为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>
  );
};

具有固定组件的嵌套路由

1 个答案: