Bootstrap Navbar does not work in React JS for single page website-CodePudding

I am making a single page website. I added the Bootstrap navbar to Menu.js using React Router but once I add the menu.js to App.js the website becomes blank. Besides the links are not working. They are supposed to jump to the given component on the same page.

Here is my code for App.js

import "./App.css";
import "./components/Introduction";
import Menu from "./components/Menu";
import Introduction from "./components/Introduction";
import Team from "./components/Team";
import Products from "./components/Products";
import Contact from "./components/Contact";
import BackgroundImage from "./components/BackgroundImage";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div className="App">
      <Menu />
      <BackgroundImage />
      <div className="container titel text-center">
        <h1>Titel</h1>
        <h2>
          <em>Subtitle</em>
        </h2>
      </div>
      <Introduction />
      <Products />
      <Team />
      <Contact />
    </div>
  );
}

export default App;

Here is my code for Menu.js (Navbar)

import React from "react";
import "./Menu.css";
import { Navbar, Nav, Container } from "react-bootstrap";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Introduction from "./Introduction";
import Team from "./Team";
import Products from "./Products";
import Contact from "./Contact";
import App from "../App";

function Menu() {
  return (
    <Router>
      <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand as={Link} to={"/"}>
            React-Bootstrap
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link as={Link} to={"/introduction"}>
                Introduction
              </Nav.Link>
              <Nav.Link as={Link} to={"/products"}>
                Products
              </Nav.Link>
              <Nav.Link as={Link} to={"/team"}>
                Team
              </Nav.Link>
              <Nav.Link as={Link} to={"/contact"}>
                Contact
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      <Routes>
        <Route exact path="/">
          <App />
        </Route>
        <Route path="/introduction">
          <Introduction />
        </Route>
        <Route path="/products">
          <Products />
        </Route>
        <Route path="/team">
          <Team />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
      </Routes>
    </Router>
  );
}

export default Menu;

I had to use Routes instead of Switch (error message). I tried to add the code between Routes to index.js and also to App.js. But none of them worked.

CodePudding user response：

You have put Menu inside of App, and App inside a route of Menu. Yes, this will go wrong (;

I recommend having a layout like this:

export const App = () => {
  return (
    <BrowserRouter>
      // On every page, could be nav
      <Router>
        <Route></Route>
        <Route></Route>
        <Route></Route>
        <Route></Route>
        <Route></Route>
      </Router>
      // On every page
    </BrowserRouter>
  );
};

And not have the Router inside of your nav.

CodePudding user response：

In react-router-dom@6 the Route component API changed. Routed components are rendered on a single element prop, not as children components of the Route. You might also want to wrap App with the Router component and render the routes there separately from the navigation component.

Example:

function App() {
  return (
    <Router>
      <div className="App">
        <Menu />
        <BackgroundImage />
        <div className="container titel text-center">
          <h1>Titel</h1>
          <h2>
            <em>Subtitle</em>
          </h2>
        </div>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/introduction" element={<Introduction />} />
          <Route path="/products" element={<Products />} />
          <Route path="/team" element={<Team />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
}

...

function Menu() {
  return (
    <Navbar bg="light" expand="lg">
      <Container>
        <Navbar.Brand as={Link} to="/">
          React-Bootstrap
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link as={Link} to="/introduction">
              Introduction
            </Nav.Link>
            <Nav.Link as={Link} to="/products">
              Products
            </Nav.Link>
            <Nav.Link as={Link} to="/team">
              Team
            </Nav.Link>
            <Nav.Link as={Link} to="/contact">
              Contact
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}