子路由在反应路由器 v4 中不起作用

Question

我正在尝试在 react 路由器中嵌套路由，但 \sports\cricket 这样的子路由没有出现。以下是代码：

index.js

const Root = () => {
  return (
    <Router>
      <div>
        <Route exact path="/" component={Home}/>
        <Route path="/sports" component={Sports} />
      </div>
    </Router>
  );
}; 

sports.js

return (
      <div>
        <Route path="cricket" component={Cricket} />
      </div>
    );

每当我尝试获取 /sports/cricket 时，控制台都会记录错误 404：

编辑 1： 将嵌套路由移到 Sportscomponent 内。

Answer 1

嵌套路由在 v4 中不起作用。在父路由指向的组件中分配子路由。像这样：

index.js

const Root = () => {
  return (
    <Router history={browserHistory}>
      <div>
        <Route exact path="/" component={Home}/>
        <Route path="/sports" component={Sports}/>
      </div>
    </Router>
  );
}; 

sports.js

return (
  <div>
    <Route path="/sports/cricket" component={Cricket} />
  </div>
);