如何使反应项目运行npm start时得到空白屏幕

我试图用react制作一个档案组合网站，其中我做了一个NavBar.js的导航栏，我已经在我的App.js文件中导入。 但现在当我试图运行代码时，它没有显示导航栏，而是显示了空白屏幕

NavBar.js

import { Navbar, Nav, Container } from "react-bootstrap";
import logo from '/Users/rijuljain/Documents/portfolio/portfolio-web/src/assets/img/logo.svg';
import navIcon1 from '/Users/rijuljain/Documents/portfolio/portfolio-web/src/assets/img/nav-icon1.svg';
import navIcon2 from '/Users/rijuljain/Documents/portfolio/portfolio-web/src/assets/img/nav-icon2.svg';
import navIcon3 from '/Users/rijuljain/Documents/portfolio/portfolio-web/src/assets/img/nav-icon3.svg';
import { HashLink } from 'react-router-hash-link';
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="/">
            <img src={logo} alt="Logo" />
          </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">
              <div className="social-icon">
                <a href="#"><img src={navIcon1} alt="" /></a>
                <a href="#"><img src={navIcon2} alt="" /></a>
                <a href="#"><img src={navIcon3} alt="" /></a>
              </div>
              <HashLink to='#connect'>
                <button className="vvd"><span>Let’s Connect</span></button>
              </HashLink>
            </span>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </Router>
  )
}

App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import { NavBar } from "/Users/rijuljain/Documents/portfolio/portfolio-web/src/components/NavBar.js";


function App() {
  return (
    <div className="App">
      <NavBar />
    </div>
  );
}

export default App;

请告诉我应该做什么修改来使其写入。

我在控制台中没有得到任何错误，它正在完美地编译，但它在localhost屏幕上没有显示任何输出。