子组件的反应路由设置

Question

我刚开始学习 react、react-component 和 router。我能够在父组件上进行路由，但这是我卡住的场景请帮助。

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>

Answer 1

你可以把Router放在App组件里面。 （App是主要组件，所有组件都必须在里面）

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>

Answer 2

在这种情况下你需要做的是使用你的容器组件作为布局来保持你的侧边栏持久化，并且只在它的主组件中渲染子组件。

我假设下面是容器——让我们修改如下；

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>
      )}
    />
  );
};

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

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

Answer 3

我认为您将不得不使用 css 使任何选项卡的内容适合该框。 因此，就像配置文件选项卡一样，宽度为 50vw，高度为 20vh，然后尝试渲染文本并查看它在页面上的位置