反应路由器嵌套路由。不呈现子路由

Question

我有一个名为Dashboard的父组件，它被呈现为路由，如下所示：

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

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>
        )
    }
}

我试着嘲笑每个人在嵌套路由上的解决方案，但我似乎无法解决我的问题。

Answer 1

因为您在顶部路由配置中使用的是acceat道具。扔掉它：

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

而且，exceat就足够了，您不必像exact={true}那样使用它。