Reagieren ändern Route bricht Höhe mit Layout

Ich habe eine React-Anwendung, wo, wenn ich die Route zu einer Seite mit einer kleinen Höhe ändern die gesamte body hat keine maximale Höhe für das Fenster (die html hat volle Höhe).Reagieren ändern Route bricht Höhe mit Layout

Ich habe einen Standard index.html Setup hier

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

hier Dann ist meine App.js Datei:

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)

Und hier ist meine Routes.js Datei:

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

Schließlich ist hier meine Layout.js:

Alle meine Routen gehen auf Seiten mit sehr wenig Inhalt, so dass es nicht die ganze Seite umfasst. In jedem Fall wird die gesamte body Höhe auf die Höhe des Inhalts gewickelt, während die html 100% von mit Fenster bleibt.

Ich habe versucht, alles zu debuggen. Es gibt kein Padding oder Rand auf dem Körper oder HTML, das durch das Inspizieren der Elemente gerendert wird. Ich habe auch versucht, height und min-height100% Attribute zu den body Tags mit Inline-Styling hinzufügen und noch keine anständigen Ergebnisse erhalten.

Die Seite repariert sich automatisch, sobald das Fenster in der Größe geändert wird oder ich die Seite neu lade, aber das beseitigt viele Gründe, warum ich React verwende.

Irgendwelche Ideen, was könnte das beheben?

Quelle

2016-10-26 Barry Michael Doyle

Ich habe es geschafft, eine Lösung zu bekommen, das ist ein ganz bestimmtes Problem (das ich aus der fehlenden Antwort habe). Aber für den Fall, dass jemand auf ein solches Problem gestoßen ist.

Alle meine Seiten Komponenten hatte folgendes machen:

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

ich die content-wrapper Klassennamen von allen Seite Container Teilern Entfernen beendet und hat die folgenden auf die Layout Seite:

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

Dies löste alle meine Probleme :)

Quelle

2016-10-27 07:32:25

Reagieren ändern Route bricht Höhe mit Layout

Antwort

Verwandte Themen