1

メイン サイトのナビゲーション バーとダッシュボードのナビゲーション バーの 2 つの異なるナビゲーション バー コンポーネントを表示しようとしています。

私は2つの再利用可能なコンポーネントを作成しようとしました:

<LayoutNav />と<DashboardNav />

それらの実装は次のとおりです。

const LayoutNav = ({children}) => {
    return (
        <>
            <section className="container-fluid">
                <Navbar />
                {children}
            </section>
        </>
    );
}

LayoutDashboardNav以下に変更<Navbar />したのは同じです<DashboardNav />が、ルートの実装は次のとおりです。

<BrowserRouter>
        <Switch>
            <LayoutNav>
                <Route exact path="/registervehicle" component={RegVehicle} />
                <Route exact path="/result" component={SearchResults} />
                <Route exact path="/selectseat" component={PickSeat} />
                <Route exact path="/forgotpassword" component={ForgotPassword} />
                <Route exact path="/resetpassword" component={ResetPassword} />
                <Route exact path="/register" component={Registration} />
                <Route exact path="/login" component={LoginAuth} />
                <Route exact path="/" component={Home} />
            </LayoutNav>

            <LayoutDashboardNav>
                <Route exact path="/companydashboard" component={CompanyDashboard} />
            </LayoutDashboardNav>

            <Route component={NotFound} />
        </Switch>
        <Footer />
    </BrowserRouter>

<Navbar />または<DashboardNav />、それらが使用されているコンポーネントの子であるページでのみ表示されることを期待しています。しかし、すべてが表示されているのは<Navbar />.

4

1 に答える 1

1

高次コンポーネントを使用して、<Route>このようにコンポーネントをラップできます。layoutラッパー コンポーネントに、 propに基づいて使用するレイアウトを決定するロジックを持たせることができます。

// wrapper component
const DynamicLayoutRoute = props => {
  const { component: RoutedComponent, layout, ...rest } = props;

  // render actual Route from react-router
  const actualRouteComponent = (
    <Route
      {...rest}
      render={props => (
         <RoutedComponent {...props} />
      )}
    />
  );

  // depends on the layout, you can wrap Route component in different layouts
  switch (layout) {
    case 'NAV': {
      return (
        <LayoutNav>
          {actualRouteComponent}
        </LayoutNav>
      )
    }
    case 'DASH_BOARD_NAV': {
      return (
        <LayoutDashboardNav>
          {actualRouteComponent}
        </LayoutDashboardNav>
      )
    }
    default: {
      return (
        <LayoutNav>
          {actualRouteComponent}
        </LayoutNav>
      )
    }
  }
};

通常のことをする代わりに <Route exact path="/selectseat" component={PickSeat} />

今、あなたはすることができます <DynamicLayoutRoute exact path="/selectseat" component={PickSeat} layout="DASH_BOARD_NAV" />

于 2019-09-04T14:09:49.523 に答える