React change route가 레이아웃 높이로 나뉘어집니다.

React 어플리케이션이 있습니다. 작은 높이의 페이지로 경로를 변경하면 전체 body에 최대 높이가 없습니다 (html에는 전체 높이가 있음).React change route가 레이아웃 높이로 나뉘어집니다.

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 파일입니다 :

내가 표준 여기 index.html 설치

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

그리고 여기 내 App.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은 창에 100 %로 유지됩니다.

모든 것을 디버깅 해 보았습니다. 요소를 검사하여 본문이나 HTML에 여백이나 여백이 없습니다. 또한 및 min-height100% 속성을 인라인 스타일을 사용하는 body 태그에 추가했지만 여전히 괜찮은 결과를 얻지 못했습니다.

페이지 크기가 조정되는 즉시 페이지가 자동으로 수정되거나 페이지가 다시로드되지만 React를 사용하는 이유가 많이 제거됩니다.

문제를 해결할 수있는 아이디어가 있습니까?

출처

2016-10-26 Barry Michael Doyle

나는이 문제를 해결할 수있었습니다. (응답의 부족으로 인해서 수집 한 것입니다.) 그러나이 경우 다른 누구도이 같은 문제를 발견하지 못했습니다.

내 페이지의 모든 구성 요소

는 한 다음 렌더링 :

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

: 나는이 (가) Layout 페이지로 다음의 모든 페이지 컨테이너 디바이더에서 content-wrapper 클래스 이름을 제거 끝내었고, 한

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

이것은 내 모든 문제를 해결했습니다 :)

출처

2016-10-27 07:32:25

React change route가 레이아웃 높이로 나뉘어집니다.

답변

관련 문제