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

我正在点击render组件中的LookUp函数，这非常简单：

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

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

Answer 1

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

如果您要呈现/ org / login，/ org / create-account等网址，则必须使用{match.url}

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

或者如果您想使用/ login，/ create-account ...不带/ org /前缀，则不能将这些路由放在/org/:slug路径

中

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

1 个答案: