React Router v5.0 Nested Routes

Question

I\'m building a react app and I can\'t make the routing work.

1. I need one common layout (header, footer) for a few Auth routes (/login, si

Answer 1

EDIT: I have answered this question with another solution.

---

Both solutions by @Gaurab Kc & @johnny peter are great though I've ended up doing something like that:

The AuthRoute & PrivateRoute are something like that:

interface PrivateRouteProps extends RouteProps {
    component: any;
}

const PrivateRoute = (props: PrivateRouteProps) => {
    const {component: Component, ...rest} = props;

    return (
        
                localStorage.getItem('user') ? (
                    

                       ... // here is the app header
                       
                       .. // here is the app footer
                    
                ) : (
                    
                )
            }
        />
    );
};

export default PrivateRoute;

interface AuthRouteProps extends RouteProps {
    component: any;
}

const AuthRoute = (props: AuthRouteProps) => {
    const {component: Component, ...rest} = props;

    return (
        
                (
                    

                       ... // here is the auth header
                       
                       .. // here is the auth footer
                    
                )
            }
        />
    );
};

export default AuthRoute;