**App.js** import './App.css'; import Header from "./Header.js"; import Home from "./Home.js"; import Checkout from "./Checkout.js"; import { BrowserRouter as Router, Route, Routes} from "react-router-dom"; function App() { return ( <div className="App"> <Router> <Header /> <Routes> <Route path="/checkout" element={Header}/> <Route exact path="/checkout" element={<Checkout />}/> <Route exact path="/" element={<Home />}/> <Route exact path="/" element={<Header />}/> </Routes> </Router> </div> ); } export default App;

pago.js

 import React from 'react'; import "./Checkout.css"; import CheckoutProduct from "./CheckoutProduct.js"; import Subtotal from "./Subtotal.js"; function Checkout() { return ( <div className="checkout"> <div className="checkout__left"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlDIcv46GCe2DRvW-CmLDn5LHyORLkJo8isA&usqp=CAU" alt="" className="checkout__add" /> <div> <h2 className="checkout__title"> your Shopping Basket </h2> <CheckoutProduct /> </div> </div> <div className="checkout__right"> <Subtotal /> </div> </div> ) } export default Checkout

Espero que después del enrutamiento al componente de pago, se muestre todo el contenido escrito en su interior. pero solo veo una pantalla en blanco (sigo la misma estructura de código del video de Udemy)