Javascript try 使用Reaction路由V5渲染多个布局

为确保与身份验证相关的路由("/Password-Reset"、"/REGISTER"、"/LOGIN")的AuthLayout呈现正确，您可能需要重新构造您的路由.以下是如何修改路由配置的示例:

<div className="App">
<Provider store={store}>
    <BrowserRouter>
        <Switch>
            <Route path="/password-reset/:reset_key?" exact>
                <AuthLayout>
                    <PasswordReset />
                </AuthLayout>
            </Route>
            <Route path="/register" exact>
                <AuthLayout>
                    <Register />
                </AuthLayout>
            </Route>
            <Route path="/login" exact>
                <AuthLayout>
                    <Login />
                </AuthLayout>
            </Route>
            {/* Other MainLayout routes */}
            <Route>
                <MainLayout>
                    <Switch>
                        <Route path="/" exact component={Dashboard} />
                        <Route path="/search" exact component={SearchResults} />
                        <Route path="/user/:user_id" exact component={Profile} />
                        <PrivateRoute path="/settings" exact component={Settings} />
                        <Route path="/communities" exact component={CommunityDashboard} />
                        <PrivateRoute path="/communities/new" exact component={CommunityNew} />
                        <Route path="/communities/view/:community_id" exact component={CommunityView} />
                        <PrivateRoute path="/communities/edit/:community_id" exact component={CommunityEdit} />
                        <Route path='/404' component={Error404} />
                    </Switch>
                </MainLayout>
            </Route>
            <Redirect from='*' to='/404' />
        </Switch>
    </BrowserRouter>
</Provider>

通过将特定路由嵌套在其各自的布局中(与身份验证相关的路由的AuthLayout和其余的MainLayout)，您可以确保将正确的布局应用于相应的路由.

确保AuthLayout和MainLayout是正确定义其布局 struct 并相应处理子组件呈现的组件.这种 struct 应该有助于在您的Reaction应用程序中为不同的路由集呈现适当的布局.