Routes not properly configured? Not showing H1 tag-CodePudding

New to working with routes in React. I am trying to render my Home page.

Currently, my Home route (/) is showing a blank page despite an H1 tag existing on the page itself. Full reproducible code is as follows:

Home.js

import React from 'react';

function Home () {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    );
}

export default Home;

App.Js

import "./App.css";
import Sidebar from "./Components/Sidebar";
import {Route, BrowserRouter as Router} from "react-router-dom";
import Home from "./Components/Home";
import SignUp from "./Components/SignUpPage";


function App() {
  return (
    <Router>
    <div className="App">
      <Sidebar />
    </div>
<Route path="/" component={Home}/>
<Route path="/SignUp" component={SignUp} />
    </Router> //surround app with router, and conditionally display pages based on what the user is on
  );
}

export default App;

Am I missing something?

CodePudding user response：

In react router-dom v-6 they changed how you provide the component and more. this is the correct why now:

 import {BrowserRouter as Router, Routes, Route } from "react-router-dom";
   
 return(
        <Router>
            <Routes>
                <Route path="/" element={<Home/>}/>
            </Routes>
        </Router>
    );

Here is a video that show all the changes in the react-router-dom v-6 video