У меня есть реактивный проект, который отображает разные компоненты в зависимости от маршрута.У меня есть мой основной CSS, определенный как:
html, body, #root, #root>div {
height: 100% !important;
width:100% !important;
}
Высота и ширина моего приложения работает, когда его первый рендеринг (компонент).Однако, когда визуализируется другой компонент (), высота и ширина приложения не изменятся / не обновятся до максимальной высоты и ширины браузера.
На скриншоте ниже, как вы можете видеть в моем инструменте разработки Google, ширина и высота корневого HTML даже не соответствуют полному размеру страницы браузера.когда этот компонент отображается.
https://i.imgur.com/OeCjb7o.png (Невозможно опубликовать изображение из-за низкой репутации! Пожалуйста, смотрите ссылку вместо этого!)
Любая помощь будет высоко ценится!
Ниже приведен index.html, используемый в моем приложении для реакции:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="%PUBLIC_URL%/diamond.ico" />
<link rel="stylesheet" href="https://video-react.github.io/assets/video-react.css" />
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="/css/video-react.css" />
<title>REACT APP</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
А ниже приведен код App.js и порядок обработки моих маршрутов:
// /client/App.js
import React, { Component } from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
// import SearchBar from './SearchBar';
import SummonerNew from './SummonerNew';
import Search from './Search';
import NavBar from './NavBar';
import Home from './Home';
// import ChampionControl from './ChampionControl';
import ChampionControlGG from './ChampionControlGG';
import Footer from './Footer';
import FreeRotation from './FreeRotation';
// import styles from './styles.css';
import { connect } from 'react-redux';
class App extends Component {
render(){
const { region , search } = this.props
const App = ()=>(
<div id="main-inner-wrap">
<NavBar />
<Search />
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/home' component={Home}/>
<Route path='/champions' component={ChampionControlGG}/>
<Route path='/profile/:region/:id' component={SummonerNew}/>
<Route path='/rotation' component={FreeRotation}/>
<Route component={Home} />
</Switch>
<Footer/>
</div>
)
return(
<Switch>
<App/>
</Switch>
)
}
}
const mapStateToProps = (state) =>{
return {
region:state.menu.region,
search:state.menu.search
}
}
export default withRouter(connect(mapStateToProps)(App));