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 [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 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.

Check the order of the routes that you've declared on <Routes>. The most specific always goes at the bottom — Mauro Bilotti
– Mauro Bilotti, Commented Feb 2, 2022 at 18:31

Johan Petrikovsky · Accepted Answer · 2022-02-02 18:37:59Z

1

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.

answered Feb 2, 2022 at 18:37

Johan Petrikovsky

1305 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicholas Obert Over a year ago

I've changed the App component to Home for the "/" path, but still, nothing renders.

Nicholas Obert Over a year ago

I've solved it, I just needed to restart the application after applying the changes you suggested. Thank you!

Drew Reese · Accepted Answer · 2022-02-02 18:47:06Z

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>
  );
}

edited Feb 2, 2022 at 18:47

answered Feb 2, 2022 at 18:38

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

2 Comments

Nicholas Obert Over a year ago

I've changed the App component to Home for the "/" path and moved the navbar into the BrowserRouter, but still, nothing renders.

Nicholas Obert Over a year ago

I've solved it, I just needed to restart the application after applying the changes you suggested. Thank you!

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related