6

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.

William Pescherine
  • 81
  • 4
  • This is not an error message. Do you get any other message? – Guillaume Brunerie Apr 24 '22 at 15:57
  • Only other thing I get is to do the npm audit. Within devtools I see the following DevTools failed to load source map: Could not load content for http://localhost:3000/main.f3d484fe54bef4502766.hot-update.js.map: Connection error: net::ERR_CONNECTION_REFUSED bundle.js:41473 WebSocket connection to 'ws://localhost:3000/ws' failed: – William Pescherine Apr 24 '22 at 16:15
  • router.ts:11 Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page. – William Pescherine Apr 25 '22 at 03:24

3 Answers3

0

you should put the div inside the Router, no element should wrap Router and you are missing Routes if you have multiple pages in the Router

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'
<Router>
   <div className="App">
     <p>Test</p>
        <Routes>
          <Route exact path="/" component = {Main} />
          <Route exact path="/create" component = {CreateAccount}/>
          <Route exact path="/home" component = {Home}/>
          <Route exact path="/leagues" component = {Leagues}/>
          <Route exact path="/games" component = {Games}/>
       </Routes>
    </Router>
  <p>v1.041522</p>
</div>

Routes acts like Switch in react router dom v5

 <Router>
    <Switch>
       <Route exact path="/">
           <HomePage />
       </Route>
       <Route path="/blog/:slug">
           <BlogPost />
       </Route>
    </Switch>
</Router>,
codmitu
  • 636
  • 7
  • 9
  • Updated the code block above which gets the basic setup working but the imported components are still not showing. – William Pescherine Apr 24 '22 at 17:32
  • you probably don't import properly, need to add 2 dots if you get out of the current folder or 1 dot if you go down or in the same folder eg: "../folder3/folder2/ddsfs.js" or "./folder4/fdd.js" – codmitu Apr 24 '22 at 18:25
  • Yeah all same folder.....seems like I have not imported the router correctly....Also get a weird message after doing npm start....shows up for a few secs so hard to capture it.... I will also update the main thread with the app.js and main just so you see – William Pescherine Apr 24 '22 at 18:37
  • Also looked back at a known working site I built a few months back and that also no longer works.... – William Pescherine Apr 24 '22 at 18:49
0

It appears that the React Router Version you installed is version 6 which changes the structure of the react components.

stack overflow solution

Steve
  • 76
  • 4
0

Was able to figure it out. Appears I am working on v6 and the issue was in the route, the component is no longer used and had to be replaced with element

William Pescherine
  • 81
  • 4