React.js App.js not rendering my pages at all-CodePudding

I am developing a small project but my app.js file does not load my different pages (Home, About, etc). I am wondering what the issue is?

import { Routes, Route, BrowserRouter as Router } from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';
import {Home} from './pages/Home';
import {PublicAnnouncements} from './pages/PublicAnnouncements';
import {ReportACrime} from './pages/ReportACrime';
import {Staff} from './pages/Staff';    

function App() {
  return (
    <div className="App">
    <Router>
      <Navbar/>
      <Routes>
        <Route path='/' component={Home}/>
        <Route path='/staff' component={Staff}/>
        <Route path='/publicannouncements' component={PublicAnnouncements}/>
        <Route path='/reportacrime' component={ReportACrime}/>
      </Routes>
    </Router>
    </div>
  );
}

Here was my App.js file, and here is my Home.js file that in theory SHOULD display my H1

import React, {Component} from 'react';

export class Home extends Component{
  render() {
      return (  
    <div className="home">
        <h1>HOME</h1>
    </div>
    )
  }
}

export default Home;

CodePudding user response：

Okay, so my problem was not using the Route tag correctly. The guide video i was following was like 2 years old and the tag was compeletely different.

My changes went from

<Route path="/" exact component={Home}/>

<Route path="/" exact element={< Home />}></Route>

CodePudding user response：

try putting your app component inside tags , as in documentation example https://reactrouter.com/docs/en/v6/getting-started/installation