时间戳

首页 > 解决方案 > 子组件的反应路由设置

reactjs - 子组件的反应路由设置

问题描述

我刚开始学习反应、反应组件和路由器。我能够在父组件上制作路线，但这是我卡住的场景请帮助。

https://prnt.sc/rkzbrp

正如您在图像中看到的，共有三个部分，标题、侧边栏和空白区域。在侧边栏中，所有链接都是组件的，我已经在其上制作了路线。我想要的是当有人点击“配置文件”配置文件组件时加载到空白处。当一些一键式“交易”时，也会发生同样的事情。

我的路由器

 <Router>
            <Switch>
                <Route path="/dashboard/" exact component={Dashboard} />
                <Route path="/dashboard/check-in" component={CheckIn} />
                <Route path="/dashboard/deals" component={Deals} />
                <Route path="/dashboard/events" component={Events} />
                <Route path="/dashboard/invoice" component={Invoice} />
                <Route path="/dashboard/notification" component={Notification} />
                <Route path="/dashboard/profile" component={Profile} />
                <Route path="/dashboard/redemption"  component={Redemptions} />
                <Route path="/dashboard/restriction-management" component={RestrictionManagement} />
            </Switch>
        </Router>

我的整体容器

 <div className="row home-container">
               <Header />
               <div className="col-md-12 pd-0-0" style={style}>
                   <Sidebar />
               </div>
            </div>

侧边栏容器

 <div className="col-md-2 col-sm-2 sidebar-container bg-black pd-0-0">
                <div className="row">
                    <div className="col-md-12 link-container">
                        <Link to="/dashboard" className="color-white roboto">Home</Link>                       
                    </div>
                    <div className="col-md-12 link-container">

                        <Link to="/dashboard/profile" className="color-white roboto">Profile</Link>
                    </div>
                    <div className="col-md-12 link-container">
                        <Link to="/dashboard/check-in" className="color-white roboto">Checkin</Link>
                    </div>
                    <div className="col-md-12 link-container">
                     <Link to="/dashboard/events" className="color-white roboto">Events</Link>
                     </div>
                     <div className="col-md-12 link-container">
                     <Link to="/dashboard/deals" className="color-white roboto">Deals</Link>
                     </div>
                     <div className="col-md-12 link-container">
                     <Link to="/dashboard/redemption" className="color-white roboto">Redemption</Link>
                     </div>
                     <div className="col-md-12 link-container ">
                     <Link to="/dashboard/invoice" className="color-white roboto">Invoice</Link>
                     </div>
                     <div className="col-md-12 link-container">
                     <Link to="/dashboard/notification" className="color-white roboto">Notification</Link>

                     </div>
                     <div className="col-md-12 link-container">
                     <Link to="/dashboard/restriction-management" className="color-white roboto">Restriction Management</Link>
                     </div>


                </div>

            </div>

标签： reactjsreact-nativereact-router

解决方案

在这种情况下，您需要做的是使用您的容器组件作为 Layout 来保持侧边栏的持久性，并且只在其主组件中呈现子组件。

我假设以下是容器 - 让我们修改如下；

const Container = props => {
  const { children } = props;
  return (
    <div className="row home-container">
      <Header />
      <div className="col-md-12 pd-0-0" style={style}>
        <Sidebar />
      </div>
      <main>{children}</main>
    </div>
  );
};

您将作为子项发送到此处的组件将被渲染。将其视为您的仪表板组件（如交易、发票等）的 HOC 包装器。

在您的路由器中，定义一个组件来处理使用布局切换路由。这将是我们的自定义路线，它在我们的布局中呈现我们的孩子。

const RouteWithLayout = props => {
  const { layout: Layout, component: Component, ...rest } = props;

  return (
    <Route
      {...rest}
      render={matchProps => (
        <Layout>
          <Component {...matchProps} />
        </Layout>
      )}
    />
  );
};

将您的容器导入您的路由器 - 假设我们将其作为 Container 导入 - 然后使用我们定义的 RouteWithLayout 而不是 Route，如下所示；

<RouteWithLayout
   component={Dashboard}
   exact
   layout={Container}
   path="/dashboard/notification"
/>
<RouteWithLayout
   component={Profile}
   exact
   layout={Container}
   path="/dashboard/profile"
/>
...
And the rest

推荐阅读