My previous method of using router in my site does not seem to be working anymore. Below is the code snippet that is being used.

```
import './App.css';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'

import Main from "./main"
import Home from "./home"

function App() {
  return (
    <Router>
      <div className="App">
        <h2>The</h2>
        <h1>SportsForge</h1>
          <Routes>
            <Route exact path="/" component={Main} />
            <Route exact path="/home" component={Home}/>
          </Routes>
      </div>
    </Router>
  );
}

```

Installed the router in the main folder as well as the src just as back up

`npm install -S react-router-dom`

Error received when installing the router

```
up to date, audited 1570 packages in 6s

173 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

```

And this is the main.js file

```
import './App.css';

function Main() {
  return (
    <div>
      <h2>Main</h2>
    </div>
  );
}

export default Main;

```

I did see that in December 2021 something changed with the router setup as well as my version was initially different and that also caused some issue. I do know that if I remove the router and directly show the component it will display properly.

Get the following error in console:

```
router.ts:11 Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

```

Without the Router this renders just fine.