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

Question

我有一个称为Dashboard的父组件，该组件被渲染为Route，如下所示：

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

在Dashboard组件中，我还要呈现路线，该组件如下所示：

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

我也尝试过将那些路由包装在Switch中，同样的问题。

为了我，我不知道为什么这不起作用。本地路由可以很好地呈现，但“个人档案”或“消息”则不能。当我尝试点击这些URL时，我会得到在第一个代码块中找到的NotFound路由组件。

路径已设置为'/ home / profile /和'/ home / messages'，为什么当我点击这些URL时为什么不呈现它们？

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

Answer 1

因为您exact在顶级路线配置中使用了prop。算了吧：

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

另外，exact您不必像一样使用它exact={true}。