React Router跳转后出现空白区域，已设置100vh高度该如何修复？

问题修复方案 #

核心原因 #

你遇到的是flex列布局下子元素未正确分配剩余高度的问题：.my_app设置了flex-flow: column属性，但它的直接子元素NavBar和Switch没有配置弹性占比，当SomeComponent内容高度不足时，无法占满.my_app的剩余高度，就会露出底部空白。

修复步骤 #

1. 给路由容器添加弹性占比样式

推荐你在Switch外层包一层带类名的div，方便样式控制，修改App.js代码：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App(){

    return (
        <Router>
            <div className="app">
                <SideBar/>
                <div className="my_app">
                    <NavBar/>
                    {/* 新增路由容器div */}
                    <div className="route-wrapper">
                        <Switch>
                            <Route path="/some/component" render={() => <SomeComponent/>}/>
                        </Switch>
                    </div>
                </div>

            </div>
        </Router>
                
    );
}

export default App;

接着修改App.scss，新增路由容器样式：

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.app{
  width: 100%;
  min-height: 100vh;
  background-color: rgb(247, 249, 252);
  display: flex;
}

.my_app{
  width: 100%;
  min-height: 100vh;
  background-color: rgb(247, 249, 252);
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

/* 新增路由容器样式 */
.route-wrapper {
  /* 核心属性：占满flex容器剩余高度 */
  flex: 1;
  /* 内容超出时自动滚动，避免撑破父容器 */
  overflow-y: auto;
  background-color: inherit;
}

2. 校验SomeComponent样式

确认SomeComponent的根元素没有负外边距、固定高度小于父容器的问题，如果需要它撑满路由容器，可给它添加对应样式：

.some-component-root {
  width: 100%;
  min-height: 100%;
}

3. 可选移动端适配

如果页面需要在移动端使用，部分浏览器100vh会计算地址栏高度导致布局异常，可给.app和.my_app添加兼容属性：

.app, .my_app {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  height: auto;
}

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