Nested Routes not rendering with React Router v4

The reason is very obvious. for your route in main.js, you have specified the Route path of Public component with exact exact path="https://stackoverflow.com/" and then in the Public component you are matching for the other Routes. So if the route path is /signup, at first the path is not exact so Public component is not rendered and hence no subRoutes will.

Change your route configuration to the following

main.js

const Main = () => {
  return (
    <main>
      <Switch>
        <Route path="https://stackoverflow.com/" component={Public} />
        <Route path="/admin" component={Admin} />
      </Switch>
    </main>
  );
};

export default Main

public.js

const Public = () => {
  return (
    <Switch>
      <Route exact path="https://stackoverflow.com/" component={Greeting} />
      <Route path="/signup" component={SignupPage} />
      <Route path="/login" component={LoginPage} />
    </Switch>
  );
};

Also when you are specifying the nested routes these should be relative to the parent Route, for instance if the parent route is /home and then in the child Route you wish to write /dashboard . It should be written like

<Route path="/home/dashboard" component={Dashboard}

or even better

<Route path={`${this.props.match.path}/dashboard`} component={Dashboard}

Leave a Comment