为什么我的嵌套路由不起作用？ ReactRouter4

Question

我正在为我的应用程序使用 react-router v4。这是我的 routes.js:

const routes = (
    <Route 
      path="/" 
      render={props => (
        <App>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/org/:slug" component={Org} />
            <Route exact path="/test" component={Test} />
            <Route exact path="*" component={Error.NotFound} />
          </Switch>
        </App>

      )}
   />
);

所有路线都可以正常工作。在 Org 组件中，我有另一组路由：

export default () => (
  <LookUp>
    <Switch>
      <Route path="/login" component={LogIn} />
      <Route path="/create-account" component={CreateAccount} />
      <Route path="/request-password" component={Auth.Request} />
      <Route path="reset-password" component={Auth.Reset} />
    </Switch>
  </LookUp>
);

我打的是LookUp组件中的render函数，很简单：

render() {
    return <div>{this.props.children}</div>
}

我可以在渲染函数中放置一个断点并查看 children。 Switch child 在那里，所有 4 个 Route 作为 Switch 的 children，但我没有路由到任何路由在 Org 文件中。我究竟做错了什么？

Answer 1

很简单。 Org 中的第二个 <Switch> 仅当地址以 /org/ 开头时才会呈现，否则它根本看不到这些路由，因此无法使用它们。

如果你想呈现/org/login、/org/create-account等url，你必须使用{match.url}

<Route path={match.url + '/login'} component={LogIn} />

或者如果你想使用 /login, /create-account... 没有 /org/ 前缀，你不能把这些路由放在 /org/:slug Route

为什么我的嵌套路由不起作用？ ReactRouter4

Why aren't my nested routes working? ReactRouter4

react-router-v4