ReactJS app doesn't render using react-router-dom

Question

I'm new to ReactJS and I'm trying to create an app that has a homepage and an about page. I want to be able to switch between the two pages by clicking on the respective anchor/link in the navigation bar.
Everything was rendering fine before adding the BrowserRouter and the related elements to my code, but now nothing renders on the web page.
The version of react-router-dom I'm using is react-router-dom@6.2.1.

Here is my index.js file:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

App.js that makes use of a Bootstrap example:

import React from "react";
import { Link, BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./About";


export default function App() {
    return (
<div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <Link class="navbar-brand" to="/"><i class="bi bi-yin-yang"></i></Link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                <li class="nav-item">
                    <Link class="nav-link active" aria-current="page" to="/">Home</Link>
                </li>
                <li class="nav-item">
                    <Link class="nav-link" to="/about">About Us</Link>
                </li>
                </ul>
            </div>
        </div>
    </nav>

    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />} />
            <Route path="/about" element={<About />} />
        </Routes>
    </BrowserRouter>

</div>
);
};

And here is the About.js file:

import { Fragment } from "react";

export default function About() {
    return (
<Fragment>
    
    <h1>About Us</h1>

</Fragment>
);
};

And, finally, the Home.js file:

import { Fragment } from "react";

export default function About() {
    return (
<Fragment>
    
    <h1>Home</h1>

</Fragment>
);
};

I tried to follow a few guides on routing with ReactJS and searching for other answers, but with no success. I don't know what I am doing wrong. Thanks for your time.

Answer 1

The links should be moved into the router so it can know to update the route being matched & rendered. You only need one router per app to provide a routing context, so ensure you've no other routers rendered elsewhere in your app.

You should also fix the component being rendered on your home "/" path, i.e. it should probably be Home instead of recursively rendering App again.

export default function App() {
  return (
    <BrowserRouter>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <Link class="navbar-brand" to="/">
            <i class="bi bi-yin-yang"></i>
          </Link>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <Link class="nav-link active" aria-current="page" to="/">
                  Home
                </Link>
              </li>
              <li class="nav-item">
                <Link class="nav-link" to="/about">
                  About Us
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Answer 2

Calling App inside the router with the route / result in sort of an infinite loop.

your router should be like this

    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/about" element={<About />} />
        </Routes>
    </BrowserRouter>

dont forget to renanme the function name of your home component

import { Fragment } from "react";

export default function Home() {
    return (
<Fragment>
    
    <h1>Home</h1>

</Fragment>
);
};

It could be a nice add to get your nav in a dedicated component.