Implementing React Router

Question

I am trying to implement React router but only a white window appears in the browser. I have tried many things, but every time I try to implement React Router, only a white window . And wherein "webpack compiled successfully "

import { Container } from 'react-bootstrap'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen'

function App() {
  return (
    <Router>
      <Header />
      <main className="py-3">
        <Container>
          <Route path='/' component={HomeScreen} exact />
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

What versions of React and `react-router-dom` (*it looks like `react-router-dom@5`*) are you using? — Drew Reese, Apr 30 '22 at 05:43

score 0 · Answer 1 · answered Apr 30 '22 at 05:55

import { Container } from "react-bootstrap";
import { Routes, Route, BrowserRouter } from "react-router-dom";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <main className="py-3">
        <Container>
          <Routes>
            {" "}
            <Route path="/" element={<HomeScreen />} />
          </Routes>
        </Container>
      </main>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

this is the old version! Thanks, this is the correct one

score 0 · Answer 2 · answered Apr 30 '22 at 06:08

if you are using react-router-dom@6 you should replace Switch with Routes

Imports should look like this :

import { Routes, Route, BrowserRouter as Router } from "react-router-dom";

then use it like this :

<Router>
  <Routes>
    <Route path="/" element={<Component />}></Route>
  </Routes>
</Router>

Note that also when using it , replace useHistory with useNavigate

For more information on how to migrate to V6 read this : https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v6

Implementing React Router

2 Answers2