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

Question

我试图在路由器中嵌套路由但是\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：移动Sports组件内的嵌套路由。

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