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

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

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

看在我的份上，我不明白为什么这不起作用。 Home 路线呈现良好，但 Profile 或 Message 没有。当我尝试点击那些 URL 时，我取回了在第一个代码块中找到的 NotFound 路由组件。

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

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

Answer 1

因为您在顶级路由配置中使用了 exact 道具。放下它：

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

还有，exact就够了，不用像exact={true}那样用。

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

React router nested routes. Not rendering child routes

reactjs

react-router

react-router-v4

react-router-dom