React router is not working. It is showing nothing but a blank screen

Question

I am trying to make a simple react-router. But it's not even working. If I don't include the <Routes> tag the page is blank. After including the <Routes> tag it is also not working. Please take a look.

import React from 'react';
import './App.css';
import Nav from './Nav';
import About from './About';
import Shop from './Shop';
import{ BrowserRouter as Router, Switch, Route, Routes }from 'react-router-dom';

function App () {
  return (
    <Router>
      <main>
        <Nav/>
        <Routes>
          <Route path="/about" component={About}/>
        </Routes>
        <Routes>
          <Route path="/shop" component={Shop}/>
        </Routes>
      </main>
    </Router> 
  );
}

export default App;

Edit: I am using the latest version (6.3.0) of react-router-dom.

Answer 1

It looks like you are mixing syntax for React Router v5 and v6. <Routes> tag is used in v6, but component field in <Route> is used in v5. You should be using v6 as it's the latest release, so you have to change component to element. You also can't have multiple <Routes> side by side.

The documentation has a working example at the very top, I suggest you start with that and modify according to your needs. Then if something breaks you can go back and see what you have done wrong.