reactjs - React 路由器嵌套路由。不渲染子路由

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

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

就我而言，我不明白为什么这不起作用。 “主页”路线渲染良好，但“个人资料”或“消息”则不然。当我尝试点击这些 URL 时，我会返回第一个代码块中找到的 NotFound 路由组件。

路径已设置为“/home/profile/”和“/home/messages”，那么为什么当我点击这些 URL 时它们没有被渲染？

我尝试过在嵌套路由中模拟每个人的解决方案，但我似乎无法解决我的问题。

Answer 1

因为您在顶级路由配置中使用了 exact 属性。放下它:

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

另外，exact就足够了，你不必像exact={true}那样使用它。