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

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 [email protected].

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 >
        <div >
            <Link  to="/"><i ></i></Link>
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>
            <div  id="navbarNav">
                <ul >
                <li >
                    <Link  aria-current="page" to="/">Home</Link>
                </li>
                <li >
                    <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.

CodePudding user response：

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.

CodePudding user response：

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 >
        <div >
          <Link  to="/">
            <i ></i>
          </Link>
          <button
            
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span ></span>
          </button>
          <div  id="navbarNav">
            <ul >
              <li >
                <Link  aria-current="page" to="/">
                  Home
                </Link>
              </li>
              <li >
                <Link  to="/about">
                  About Us
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}