为什么在有组件时添加子路由会发出此警告

时间:2018-04-27 13:31:21

标签: reactjs react-router

  <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呢?

1 个答案:

答案 0 :(得分: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} />
仅当路径与LocationShow匹配时才会呈现

/users/:userId/location/:locationId