如何防止在React App中嵌套<Switch />？

Question

我的React应用程序中包含三个组件，并具有以下层次结构：

<App>
  <User>
    <Settings />
  </User>
</App>

我的应用如下：

<Provider store={store}>
    <Router>
        <Fragment>
            <Navbar />
            <Switch>
                <Route exact path='/' component={Landing} />
                <Route component={User} />
            </Switch>
        </Fragment>
    </Router>
</Provider>

我的 User 组件（如果用户访问“ /”以外的其他路径，我希望用户得到指导）如下所示：

<Container>
    <Switch>
        <PrivateRoute eaxct path='/dashboard' component={Dashboard} />
        <PrivateRoute path='/settings' component={Settings} />
        <Route component={NotFound} />
    </Switch>
</Container>

最后，我的 Settings 组件也具有内部路由，我已经实现了类似的方法：

    <Grid>
        <Grid.Column width={6}>
            <SideNav />
        </Grid.Column>
        <Grid.Column width={10}>
            <Switch>
                <Redirect exact from='/settings' to='/settings/basic' />
                <Route path='/settings/basic' component={Basic} />
                <Route path='/settings/account' component={Account} />
            </Switch>
        </Grid.Column>
    </Grid>

嵌套的<Switch />语句是允许的，并且工作正常，但是它使我的组件树显得如此混乱且难以调试。

如果没有更好的方法来分解大量路由并通过避免嵌套<Switch />来实现，我感到很好奇。