组件没有出现在侧边栏旁边答案

【问题标题】：Component does not appear next to sidebar组件没有出现在侧边栏旁边
【发布时间】：2021-11-08 16:46:36
【问题描述】：

我有 2 个组件：

当我得到它如下：

Sidebar.js：

import { useHistory } from 'react-router-dom';

function Sidebar(){
    let history = useHistory();

    let userClick = () =>{
        history.push("/some/link");
    };
    
    
    return(
         <div className="main_div">
            <div className="children_wrapper">
                <div className="div_item" onClick={() => userClick()}>
                    abc
                </div>
            </div>
        </div>
    );
}

export default Sidebar;

在 Sidebar.scss 中：

.main_div{
  width: 25%;
  position: fixed; //when using position: fixed and left:0; it appears as desired, but the content of the other component appears behind this sidebar component.
  left: 0;
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}


.main_div .children_wrapper{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}


.children_wrapper .div_item{
  width: 100%;
  height: 7vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

使用时位置：固定和左：0；对于 .main_div，其他组件的内容出现在这个 Sidebar 组件的后面。

看起来是这样的：

MainContent.js：

class MainContent extends React.Component{
    render(){
        return(
            <div className="container">
                <div className="container_hero_title">
                    Patients
                </div>

                <div className="child_container_parent">
                    <div className="child_container">
                        aabbcc
                    </div>
                </div>
       );
    }

}

export default MainContent;

MainContent.scss：

.container{
      width: 100%;
      margin-top: 1rem;
}


.child_container_parent{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, auto));
  grid-template-rows: repeat(auto-fit, minmax(auto, auto));
  column-gap: 1fr;
  row-gap: 1fr;
}


.child_container_parent > .child_container{
  display: flex;
  align-items: center;
  width: 95%;
  height: 25vh;
  margin-top: 2rem;
  margin-bottom: 1rem;
  margin-left: 1rem;

}

在 App.js 中：

当我在 main_app div 中像这样调用组件（侧边栏）时，它会根据需要显示在侧边栏位于主要内容旁边的位置：

<div className="app">
  
  <div className="main_app">
      <SideBar/>
      <MainContent />
  </div>

看起来如愿。所需图像：

但是，当我将它放在 Route 渲染道具中时，如下所示：

function App() {
  return (
      <Router>
          <div className="app">
              
              <div className="actual_app">
                  <SideBar/>
                 
              </div>

              <Switch>
                  <Route path="/some/link" render={() => <MainContent/>} />
              </Switch>

          </div>
      </Router>

  );
}

它显示在当前页面下方而不是侧边栏旁边。

如何解决这个问题并让主要内容不出现在 SideBar 后面或 SideBar 下方？

【问题讨论】：

标签： javascript css reactjs sass react-router

【解决方案1】：

您是否尝试过将“Switch”包装在 div 中并在您的类“.app”上使用“display: flex”。它应该水平对齐所有组件，而不是将所需的组件向下推。

在您的“MainContent.js”中，您的“.container”缺少结束标记。

【讨论】：