I have developed a React component for the homepage of my React application. Utilizing React Router, I am able to navigate through different components on the site. The issue I'm facing is that the homepage component does not occupy the entire page except for the navbar section.
Here is my Home.js (homepage component)
import React from 'react';
import './Home.css';
export default function Home() {
return (
<html>
<body>
<div class="home">
<h1>Home Page</h1>
</div>
</body>
</html>
)
}
This is my navbar
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>
)
}
This is my 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;
This is a snapshot of the site https://i.sstatic.net/ORpk6.png