反应改变路线打破布局的高度

Question

我有一个 React 应用程序，如果我将路由更改为高度较小的页面，整个 body 没有 window 的最大高度（html 确实有全高）。

我这里有一个标准的index.html设置

<html>
    <body>
       <div id="app"></div>
       <script src="client.min.js"></script>
    </body>
</html>

然后这是我的 App.js 文件：

import React from "react"
import ReactDOM from "react-dom"
import {Router, hashHistory} from "react-router"

import routes from "./Routes"

const app = document.getElementById('app')

ReactDOM.render((
    <Router history={hashHistory} routes={routes()}>
    </Router>
), app)

这是我的 Routes.js 文件：

import React from "react"
import {Route, IndexRoute} from "react-router"

import Layout from "./Layout"

import About from "./pages/About"
import Home from "./pages/Home"
import NotFound from "./pages/NotFound"
import Register from "./pages/Register"
import SignIn from "./pages/SignIn"
import Terms from "./pages/Terms"

export default() => {
    return (
        <Route name="root" path="/" component={Layout}>
            <IndexRoute component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/signin" component={SignIn}/>
            <Route path="/register" component={Register}/>
            <Route path="/terms" component={Terms}/>
            <Route path="*" component={NotFound}/>
        </Route>
    )
}

最后是我的 Layout.js:

import React from "react"
import ReactDOM from "react"
import DevTool from 'mobx-react-devtools'

import Control from "./components/layout/Control"
import Footer from "./components/layout/Footer"
import Header from "./components/layout/Header"
import Sidebar from "./components/layout/Sidebar"

export default class Layout extends React.Component {
    render() {
        const { location } = this.props

        return (
            <div className="wrapper">
                <DevTool /> {/* Remove for PRODUCTION */}
                <Header />
                <Sidebar />
                {this.props.children}
                <Footer />
                <Control />
                <div className="control-sidebar-bg"></div>
            </div>
        )
    }
}

我的所有路线都转到内容很少的页面，因此不会覆盖整个页面。在每种情况下，整个 body 高度都会包裹到内容的高度，而 html 仍然是 window.

的 100%

我已经尝试调试所有内容。通过检查元素呈现的主体或 html 上没有填充或边距。我还尝试将 height 和 min-height 100% 属性添加到具有内联样式的 body 标签，但仍然没有得到任何不错的结果。

一旦 window 调整大小或我重新加载页面，页面就会自动修复，但这消除了我使用 React 的很多原因。

有什么办法可以解决这个问题吗？

Answer 1

我设法解决了这个问题，这是一个非常具体的问题（我是从没有回应中收集到的）。但万一其他人偶然发现了这样的问题。

我所有的页面组件都有以下渲染：

export default class About extends React.Component {
    render() {
        return (
            <div className="content-wrapper">
                {/* All my about code goes in here */}
            </div>
        )
    }
}

我最终从所有页面容器分隔符中删除了 content-wrapper 类名，并对 Layout 页面执行了以下操作：

export default class Layout extends React.Component {
    render() {
        const { location } = this.props

        return (
            <div className="wrapper">
                <DevTool /> {/* Remove for PRODUCTION */}
                <Header />
                <Sidebar />
                <div className="content-wrapper">
                    {this.props.children}
                </div>
                <Footer />
                <Control />
                <div className="control-sidebar-bg"></div>
            </div>
        )
    }
}

这解决了我所有的问题:)

反应改变路线打破布局的高度

React changing route breaks height with layout

html

reactjs

height

react-router

document-body