當我有組件時，為什么添加子路由會發出此警告

Question

  <Route path="/users/:userId" component={UserShow}>
    <Route path="/location/:locationId" component={LocationShow} />
  </Route>

我在Chrome控制台中看到以下警告：

 bundle.js:887 Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored 

如果我不應該將組件添加到/ user /：userId路由，那么我應該在哪里添加組件UserShow？

Answer 1

嵌套路由應直接添加到父組件中：

const UserShow = props => (
  <div>
    <div>User info</div>
    <Route path={`${props.match.url}/location/:locationId`} component={LocationShow} />
  </div>
);

<Route path="/users/:userId" component={UserShow} />

僅當路徑匹配/users/:userId/location/:locationId時，才會渲染LocationShow 。