Question

我刚刚开始学习反应，反应组件和路由器。我可以在父组件上进行路由，但是在这种情况下，我被卡住了，请帮忙。

如您在图像中看到的，共有三个部分，标题，侧边栏和空白。在边栏中，所有链接都是组件的组成部分，我已经在该组件上进行了路由。我要的是当有人单击“配置文件”配置文件组件时，将其装入空白。一键点击“交易”也会发生同样的事情。

我的路由器

 <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>

Answer 1

在这种情况下，您需要做的是使用容器组件作为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>
  );
};

您将在此处作为子级发送的组件将被渲染。可以将其视为仪表板组件（例如Deals，Invoice等）的HOC包装。

在路由器中，定义一个组件以处理通过布局切换路由的操作。这将是我们的自定义路线，该路线会在布局中呈现我们的孩子。

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

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

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

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

Answer 2

我认为您必须使用CSS使所有标签的内容都适合该框。因此，像个人资料标签一样，宽度为50vw，高度为20vh，然后尝试呈现文本并查看其在页面上的位置

Answer 3

您可以在 App 组件中放置 Router 。（应用程序是主要组件，所有组件都必须包含在其中）

const App = () => {

 return (
  <Router>
   <div className="row home-container">
    <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>  

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

);
};

就像这样

侧边栏容器是更合适的尝试用这种方式编写

 const Sidebar  = ({ match }) => {

return (
  <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={match.url + "/dashboard"} className="color-white roboto">Home</Link>                       
     </div>
     <div className="col-md-12 link-container">

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

     </div>
     <div className="col-md-12 link-container">
     <Link to={match.url + "/dashboard/restriction-management"} className="color-white roboto">Restriction Management</Link>
     </div>

</div>

<Switch>
    <Route
      exact
      path={match.url}
      render={() => <div> Pick a project to view!</div>}
    />
</Switch>

反应子组件的路由设置

3 个答案: