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}