So I’m new to React… and theses days I’m truing to learn React, but I am facing an issue and I don’t know what’s the issue? I have read a lot of issue like my issue and try the solution, but unfortunately it didn’t work.
My issue is nothing display when I run the app. Only a black page which is the background color. I create a navbar, but it didn’t display.
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
reportWebVitals();
App.js
import "./App.css";
import { NavBar } from "./components/NavBar";
function App() {
return (
<div className="App">
<NavBar />
</div>
);
}
export default App;
NavBar.js
import { useState, useEffect } from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import { BrowserRouter as Router } from "react-router-dom";
export const NavBar = () => {
const [activeLink, setActiveLink] = useState("home");
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => {
if (window.scrollY > 50) {
setScrolled(true);
} else {
setScrolled(false);
}
};
window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, []);
const onUpdateActiveLink = (value) => {
setActiveLink(value);
};
return (
<Router>
<Navbar expand="md" className={scrolled ? "scrolled" : ""}>
<Container>
<Navbar.Brand href="/"></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav">
<span className="navbar-toggler-icon"></span>
</Navbar.Toggle>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ms-auto">
<Nav.Link
href="#home"
className={
activeLink === "home" ? "active navbar-link" : "navbar-link"
}
onClick={() => onUpdateActiveLink("home")}
>
Home
</Nav.Link>
<Nav.Link
href="#skills"
className={
activeLink === "skills" ? "active navbar-link" : "navbar-link"
}
onClick={() => onUpdateActiveLink("skills")}
>
Skills
</Nav.Link>
<Nav.Link
href="#projects"
className={
activeLink === "projects"
? "active navbar-link"
: "navbar-link"
}
onClick={() => onUpdateActiveLink("projects")}
>
Projects
</Nav.Link>
</Nav>
<span className="navbar-text"></span>
</Navbar.Collapse>
</Container>
</Navbar>
</Router>
);
};
1