React Router is not working and returns a blank page

Question

I am trying to develop a multi-page React App and I tried to use React Router but when I hit Save and reload the page I get a blank page. This is what I have: The Home component:

import React from "react";
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import AboutUs from './components/AboutUs';
import Footer from './components/Footer';

export default function Home() {
    return (
      <div>
        <Navbar />
        <Hero />
        <AboutUs />
        <Footer />
      </div>
    )
}

This is App component:

import React from 'react';
import Home from './Home';
import { Route, Router, browserHistory, Link } from "react-router-dom";

export default function App() {
  return (
        <Router history={browserHistory}>
            <Router exact path="/" component={Home} />
        </Router>
  );
}

And finally this is the index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
);

When I hit Save and reload the page, because I am doing this on replit.com, all I get is a blank page. What am I doing wrong?

I tried to import Router from react-router-dom and wrap my <Route /> tags within a <Router /> tag and still get the same.

Answer 1

Here is a working version of your App component

import { Route, Routes } from "react-router-dom";
import Home from "./home";
import "./styles.css";

export default function App() {
  return (
    <Routes >
        <Route exact path="/" element={<Home/>} />
    </Routes>
);
}

Use Routes instead of Router and use element prop in Route to specify what will be rendered.

As for history, you can use useNavigate hook:

  const nav = useNavigate();
  const handleCheckout = () => nav("/");

Answer 2

Issues

1. You are rendering an additional Router instead of Route for the Home component
2. You are already rendering a BrowserRouter in the index file, there's no need for any additional router components as you need only one for the entire app.

Solution

Fix the home page route.

<Route exact path="/" component={Home} />

Remove all extraneous routers. I suggest rendering the Route components into a Switch.

import { Switch, Route } from 'react-router-dom';

export default function App() {
  return (
    <Switch>
      ... other more specific routes by path ...
      <Router path="/" component={Home} />
    </Switch>
  );
}

Based on the errors you mention in one of the comments I think you might actually be using react-router-dom@6. The Switch component was replaced by a Routes component and the Route component API changed significantly.

Example:

import { Routes, Route } from 'react-router-dom';

export default function App() {
  return (
    <Routes>
      <Router path="/" element={<Home />} />
      ... other routes ...
    </Routes>
  );
}

Answer 3

If you have used Router in HomePage and want to use it again in other pages, just use Routes and not Router, as follows

<div>
        <Routes>
          <Route path='/home'  exact element={<Home/>} />
          <Route path='/reports' element={<Reports/>} />
          <Route path='/products' element={<Products/>} />
        </Routes>
</div>

Hope this helps!!!