我创建了一个 React 组件作为我的 React 应用程序的主页。我正在使用 React 路由器浏览我网站上的组件。我能够在我的导航栏下显示主页组件，但是我遇到的问题是主页组件没有占用页面的整个其余部分。我希望该组件占据除导航栏之外的页面其余部分。
这是我的 Home.js(主页组件)
import React from 'react';
import './Home.css';
export default function Home() {
return (
<html>
<body>
<div class="home">
<h1>Home Page</h1>
</div>
</body>
</html>
)
}
这是我的导航栏
import React from 'react';
export default function Navbar() {
return (
<div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark py-0">
<a class="navbar-brand" href="/">Planet Code</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
</nav>
</div>
)
}
这是我的 App.js
import React from 'react';
import Navbar from './components/Navbar';
import About from './components/About';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Home from './components/Home';
function App() {
return (
<>
<Navbar />
<Router>
<div>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
</>
)
}
export default App;
这是网站截图
最佳答案
扩展页面主页部分的一种方法是使用 min-height 100vh 并使用 CSS calc() 减去导航栏的高度...
.home {min-height: calc(100vh - 80px);}
...其中 80px 是导航栏的高度。
您还可以使用 Flex 和 flex-grow: 1 根据 this solution .
顺便说一句，您的 HTML 不是您设置的那样语义化，因为您的导航栏 HTML 位于主页组件之外 <html>标签。
我会移动
<html><body></body></html>标记到您的 App 组件中，允许 Nav 和 Home 正确位于应用程序的 html 中。
关于html - react 组件高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59474701/