Nested Routes not rendering with React Router v4

Question

I am trying to group some of my routes together with React Router v4 to clean up some of my components. For now I just want to have my non logged in routes group together a

Answer 1

The reason is very obvious. for your route in main.js, you have specified the Route path of Public component with exact exact path='/' 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 (
    

      
        
        
      
    
  );
};

export default Main

public.js

const Public = () => {
  return (
    
      
      
      
    
  );
};

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

or even better