React Router doesn't render

Question

i've been following an online course about react but it's a bit dated and i've been struggling through all the lessons to understand the concepts explained while applying the new syntax instead of the the one shown in the videos. i've always more or less managed but now i'm stuck because, after adding the react router dom web app, my pages don't render anymore. no errors nor warnings are shown and no matter how much i look, i can't seem to find the mistake. my main right now looks like this:

import React from 'react';
import Header from './header';
import MyPlacesList from './myplaceslist.js';
import Footer from './footer';
import CreatePlace from './createPlace.js';
import * as attAPI from '../utils/attractionsAPI';
import { Router, Route } from 'react-router-dom';

class Main extends React.Component{

  state = {
    attractions: [],
  }

  componentDidMount(){
    attAPI.getAll().then((attractions) => {
      this.setState({attractions})
    })
  }

  removePlace = (attraction) => {
    this.setState((state) => ({
      attractions: state.attractions.filter((attr) => attr.id !== attraction.id)
    }))
    attAPI.remove(attraction);
  }

  render(){
    return (
      <Router>
        <Fragment>
          <Header titolo = 'My Places' sottotitolo = 'I miei posti preferiti'/>
          <Route exact path = '/' render =  {() => (
            <MyPlacesList attractions = {this.state.attractions}
            onRemovePlace = {this.removePlace} />
          )}/>
          <Route path = '/create' render = {() => (
            <CreatePlace />
          )}/>
          <Footer />
        </Fragment>
      </Router>
    )
  }
}

export default Main;

and this is the header:

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Icon from '@mui/material/Icon';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import { Link } from 'react-router-dom';

class Header extends React.Component{
  render(){
  //   return <nav>
  //   <div className = "nav-wrapper">
  //     <a href = "#" className = "brand-logo">{this.props.titolo}</a>
  //   </div>
  // </nav>

return <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
          <Toolbar>
            <Typography
              variant="h6"
              noWrap
              component="div"
              sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
            >
              {this.props.titolo}
            </Typography>
            <Link to = '/create'>
            <IconButton>
               <AddCircleIcon />
            </IconButton>
            </Link>
          </Toolbar>
        </AppBar>
      </Box>
  }
}

export default Header;

before adding react router dom i was using the state to call the components MyPlacesList/CreatePlace (createPlace only gets shown when i click on a button) and it worked just fine, the problem appeared after i tried to use <Route> . any ideas in how could i fix this? thank you in advance!

EDIT - here's my index page too:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Main from './components/main';
import { BrowserRouter } from 'react-router-dom';

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

Answer 1

Things to correct

1. Use React.Fragment instead of just Fragment or import from react.
2. Add All Routes between Routes component.
3. You have already add Router or BrowserRouter in index.js so don't need to add again.

There is a change in nesting in version 5.

So ultimately the nesting should be in version 6

<BrowserRouter>
  <Routes>
    <Route>
    <Route>
  </Routes>
</BrowserRouter>

import MyPlacesList from "./myPlacesList.js";
import CreatePlace from "./createPlace.js";
import { Route, Routes } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div>Some Header component</div>
        <Routes>
          <Route
            exact
            path="/"
            render={() => (
              <MyPlacesList
                attractions={this.state.attractions}
                onRemovePlace={this.removePlace}
              />
            )}
          />
          <Route path="/create" render={() => <CreatePlace />} />
        </Routes>
      </React.Fragment>
    );
  }
}

export default App;