1

I'm having an issue with react-router-dom, the components aren't showing up. I have checked in package.json that react-router-dom is well installed, and it is as it is showing:

"react-router-dom": "^6.3.0",

And here is my App

import React from "react";
import Home from "./Home.js"
import More from "./More.js"
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'


function App() {
  return (
      <Router>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/more" element={<More/>}/>
        </Routes>
      </Router>
  );
}

export default App;

I feel like im doing everything right as i also added this to my index.js

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

But my components are still not showing up

Beni
  • 51
  • 7
  • I don't see any issue with the code in the snippet. Are there any errors? What debugging have you done? Stopped and restarted any development servers? Do `Home` or `More` render without issue on their own not on a route? Would it be possible for you to create a *running* [codesandbox](https://codesandbox.io/) demo of your code that reproduces the issue that we could inspect and debug live? – Drew Reese Jun 30 '22 at 21:09
  • no errors, Home and More render without issue without the routers – Beni Jun 30 '22 at 21:16
  • Can you confirm the installed `react-router-dom` version by running `npm list react-router-dom` from the project's root directory and report back? Can you also confirm the version of React that you are using? – Drew Reese Jun 30 '22 at 21:17
  • i runned i different command but i still installed react-router-dom with npm install --save react-router-dom – Beni Jun 30 '22 at 21:19
  • What does "i runned i different command" mean? I'm asking for you to check what version is *actually* installed. – Drew Reese Jun 30 '22 at 21:20
  • My bad. Yes, I installed react-router-dom, I just used a different command: npm install --save react-router-dom My react version is: "react": "^17.0.2", – Beni Jun 30 '22 at 21:22
  • This should work, see [here](https://codesandbox.io/s/hardcore-meadow-ppkheg) – Tom Jun 30 '22 at 21:22
  • Sorry, I think there's still a misunderstanding. By running `npm list react-router-dom` it will report the version(s) that are installed. This is so we can verify you are using the correct component API/syntax. – Drew Reese Jun 30 '22 at 21:23
  • oh okay sorry, one sec – Beni Jun 30 '22 at 21:23
  • i mean i specified the version used in the post: react-router-dom@6.3.0 – Beni Jun 30 '22 at 21:24
  • 1
    That doesn't confirm (to us) what is really installed. That might only be what you *think* is installed. – Drew Reese Jun 30 '22 at 21:25
  • okay, yeah so installed 6.3.0 – Beni Jun 30 '22 at 21:27
  • Ok, thanks. Can you try making a *running* [codesandbox](https://codesandbox.io/) demo that reproduces this issue then? Other than the duplicate/nested router I don't see anything that would cause the routed components not to render. It'd be nice if we could run your code live. – Drew Reese Jun 30 '22 at 21:30
  • okay, give me a moment please – Beni Jun 30 '22 at 21:31

2 Answers2

2

The issue is that you can not render a router inside another router, and you have:

 <BrowserRouter>
    <App />
  </BrowserRouter>

wich is:

 <BrowserRouter>
    <Router>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/more" element={<More/>}/>
        </Routes>
      </Router>
</BrowserRouter>

Try to remove one of the routers

Angel Hdz
  • 715
  • 1
  • 3
  • 7
  • 1
    This is true. I didn't catch it, but if so then I'd expect OP to have an invariant error thrown since nesting routers is invalid in RRDv6. – Drew Reese Jun 30 '22 at 21:26
  • sorry, this doesn't seem to be working for me, the components are still not showing – Beni Jun 30 '22 at 21:28
0

You can remove the router (BrowserRouter) in the app.js. Keep the in the index.js and the app will work.

App.js file

import React from "react";
import Home from "./Home.js"
import More from "./More.js"
import { Route, Routes } from 'react-router-dom'


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

export default App;

Index.js file

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
Nilesh Vincent
  • 13
  • 3