子路由在React Router V4中不起作用

Question

I'm trying to nest routes in react router but \\sports\\cricket sub-routes like this aren't showing up. Following is the code:

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

The console logs error 404 whenever I try to get /sports/cricket :

Edit 1: Moved the nested route inside of the Sports component.

Answer 1

Nested routes don't work in v4. Assign subroutes in the component that the parent route points to. Like this:

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