Question

在我的 Reactjs 应用程序中，我使用的是软件包的版本：

"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0"

我想实现嵌套路由

树结构就是这样

 1. AuthenticationLayout
     -> a) welcomeComponent
     -> b) loginCompnent
 2. DashboardLayout
     -> a) homeComponent
     -> b) featureOneComponent
     ...
     -> n) featureNComponent

在我的 App.js 文件下，我有这个：

import React from 'react';
import { BrowserRouter, Route, Switch , Redirect} from 'react-router-dom';
import DashboardLayout from './views-layouts/DashboardLayout';
import './shared/scss/styles.scss';
import AuthenticationLayout from "./views-layouts/AuthenticationLayout";

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/auth" component={AuthenticationLayout} />
        <Route path="/dash" component={DashboardLayout} />
      </Switch>
    </BrowserRouter>
  );
}

我的 AuthenticationLayout 看起来像这样：

  render() {
    const { sidebarCollapsed } = this.state;
    const sidebarCollapsedClass = sidebarCollapsed ? 'side-menu-collapsed' : '';
    return (
      <PageContent>
        <Switch>
          <Route path="/auth/welcome" component={WelcomePage} />
          <Redirect from="/" to="/auth/welcome" />
        </Switch>
      </PageContent>
    );
  }

我的 DashboardLayout 看起来像这样：

render() {
    const { sidebarCollapsed } = this.state;
    const sidebarCollapsedClass = sidebarCollapsed ? 'side-menu-collapsed' : '';
    return (
      <ContextProviders>
        <div className={`app ${sidebarCollapsedClass}`}>
          <PageAlert />
          <div className="app-body">
            <Page>
              <Header
                toggleSidebar={this.toggleSideCollapse}
                isSidebarCollapsed={sidebarCollapsed}
                routes={routes}
                {...this.props}
              >
                <HeaderNav />
              </Header>
              <PageContent>
                <Switch>
                  {routes.map((page, key) => (
                    <Route path={page.path} component={page.component} key={key} />
                  ))}
                  <Redirect from="/" to="/dash/home" />
                </Switch>
              </PageContent>
            </Page>
          </div>
        </div>
      </ContextProviders>
    );
  }

为此，我有多个路线规则：

const pageList = [
  {
    name: 'Acceuil',
    path: '/dash/home',
    component: Dashboard,
  },
  {
    name: 'featureOne',
    path: '/dash/elements/featureOne',
    component: Buttons,
  },
  {
    name: 'featureTwo',
    path: '/dash/elements/featureTwo',
    component: Alerts,
  },
...

首先：

如何设置应用程序最初“在 "/" 内加载 AuthenticationLayout，并在其中设置要显示的第一个默认组件 (WelcomeComponent)。
在我的 WelcomeComponent 中：我有一个按钮 “转到仪表板”，这个按钮将如何加载 DashboardLayout（和它的默认组件 /home），并根据提到的路由规则在 DashboardLayout 内部保持路由

建议??

Reactjs：使用默认路由嵌套多个路由

0 个答案: