React Router Route render属性配置后组件出现在侧边栏下方而非旁侧

问题根因 #

• 布局结构层级错误：你调整后的.app容器下的.actual_app（放侧边栏）和Switch路由容器是同级块级元素，默认会垂直排列，自然就会出现侧边栏在上、路由渲染内容在下的效果，没有应用之前.main_app的flex横向排列规则。
• 冗余渲染问题：你当前在.actual_app里已经渲染了一次Sidebar，路由/some/link里又重复渲染了一次Sidebar，没有渲染主内容，也会导致页面出现两个侧边栏，布局错乱。
• 样式类名不匹配：原来生效的flex布局类是.main_app，你调整后改成了actual_app，没有对应写flex布局样式，自然无法实现横向排列。

解决步骤 #

1. 调整App.js的布局结构，把Sidebar和路由容器放在同一个flex布局的父容器内，路由内部只渲染对应页面的主内容，不要重复渲染Sidebar：

function App() {
  return (
      <Router>
          <div className="app">
              <div className="main_app">
                  <Sidebar/>
                  <div className="switch_wrapper">
                    <Switch>
                        <Route path="/some/link" render={() => <div>你的页面主内容</div>} />
                    </Switch>
                  </div>
              </div>
          </div>
      </Router>
  );
}

2. 在App.scss里补充主内容区域的样式，让它自动占满侧边栏之外的剩余宽度：

.main_app .switch_wrapper {
  flex: 1;
  min-height: 100vh;
}

3. 调整Sidebar的sticky定位配置，避免定位失效：

.main_div{
  width: 25%;
  position: sticky;
  top: 0; /* 补充sticky定位的顶部偏移值，固定在视口顶部 */
  height: 100vh; /* 补充高度，让侧边栏占满整屏高度 */
  float: left;
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者user15900386