Estoy siguiendo este tutorial de React en YouTube , pero no puedo hacer que mis rutas se rendericen en mi propio servidor de desarrollo.

Esto es lo que muestra mi pantalla de inicio. Mi pantalla de inicio debería mostrar un fondo rosa debajo de la barra de navegación.

Sospecho que el error está ocurriendo en esta sección de mi código App.js, ya que todo lo demás funciona bien:

 <Routes> <Route exact path="/" component={HomeScreen}/> </Routes>

estoy usando react-router-dom v6.3.0

Mi código App.js:

 import './App.css'; import { useState } from "react"; import { BrowserRouter as Router, Routes, Route} from "react-router-dom"; // Screens import HomeScreen from './screens/HomeScreen'; // Components import Navbar from './components/Navbar'; import SideDrawer from './components/SideDrawer'; import Backdrop from './components/Backdrop'; function App() { const [sideToggle, setSideToggle] = useState(false); return ( <Router> <Navbar click={() => setSideToggle(true)} /> <SideDrawer show={sideToggle} click={() => setSideToggle(false)} /> <Backdrop show={sideToggle} click={() => setSideToggle(false)} /> <main> <div className="app">This is a test</div> <Routes> <Route exact path="/" component={HomeScreen}/> </Routes> </main> </Router> ); } export default App;

Mi código index.js:

 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") ); reportWebVitals();

Mi código de pantalla de inicio:

 import "./HomeScreen.css"; const HomeScreen = () => { return ( <div className="homescreen"> Home Screen </div> ) } export default HomeScreen

¿Espero que alguien pueda dar algún consejo a un novato de React? Por favor, hágamelo saber si necesito proporcionar más información.