反应路由器组件未显示

Question

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

Answer 1

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

Answer 2

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