React router nested routes. Not rendering child routes

Question

I have a parent component called Dashboard that's being rendered as a Route like so:

const Routes = ({ authenticated }: { authenticated: boolean }) => (

    <Switch>
        <AuthenticatedRoute path="/home" exact={true} component={Dashboard} authenticated={authenticated} />
        <UnauthenticatedRoute path="/login" exact={true} component={Login} authenticated={authenticated} />
        <AuthenticatedRoute path="/onboarding" exact={true} component={Onboarding} authenticated={authenticated} />
        <AuthenticatedRoute path="/meets" exact={true} component={Meets} authenticated={authenticated} />
        <Route component={NotFound} />
    </Switch>

)

export default Routes

Within the Dashboard component I'd like to also render routes, the component looks like this:

class Dashboard extends React.Component<IProps, {}> {
    public render() {
        return (
            <div>
                <Navigation />

                <Route exact={true} path="/home" component={Home} />
                <Route exact={true} path="/home/profile" component={Profile} />
                <Route exact={true} path="/home/messages" component={Messages} />

                HALLO
            </div>
        )
    }
}

I've also tried wrapping those Routes inside a Switch, same problem.

For the sake of me I can't figure out why this isn't working. The Home route renders fine but Profile or Message doesn't. When I try hit those URL's I get back the NotFound route component found in the 1st code block.

The path has been set as '/home/profile/ and '/home/messages' so why aren't they being rendered when I'm hitting those URL's?

I've tried mocking everybody's solution at nested routes and I can't seem to solve my issue.

Answer 1

Because you are using exact prop in your top route configuration. Drop it:

<AuthenticatedRoute path="/home" component={Dashboard} authenticated={authenticated} />

Also, exact is enough, you don't have to use it like exact={true}.