Sub routes not working in 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 Sportscomponent.

Possible duplicate of [Specify Child Routes in react-router v4](https://stackoverflow.com/questions/44452858/specify-child-routes-in-react-router-v4) — Shubham Khatri, Aug 18 '17 at 09:49

score 0 · Answer 1 · answered Aug 18 '17 at 10:34

0

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

answered Aug 18 '17 at 10:34

Still doesn't work. Throws the same error in the console. – m-ketan Aug 18 '17 at 10:50
1

Instead of `BrowserRouter` replace it with `HashRouter` everywhere, and see if `localhost:3000/#/sports/cricket` works. The reason is that, if you havn't configured your routes on the server then you will get 404 not found on react browser routes. – Aug 18 '17 at 10:54

Sub routes not working in react router v4

1 Answers1