Cuando intento ejecutar el siguiente código, solo se muestra el elemento de encabezado en la página principal o solo el elemento de inicio, pero no juntos.
import './App.css'; import Header from './Header' import Home from './Home' import Checkout from "./Checkout" import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return ( // BEM <Router> <div className='app'> <Routes> <Route path="/checkout" element={<Header />}/> <Route path="/checkout" element={<Checkout />}/> </Routes> <Routes> <Route exact path="/" element={<Home />}/> <Route path="/" element={<Header />}/> </Routes> </div> </Router> ); } export default App;Si desea que el Header se muestre siempre, simplemente sáquelo del componente del Router . apilar
import * as React from 'react'; import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom'; import './style.css'; export default function App() { return ( <div> <Header /> <Router> <Routes> <Route path="/checkout" element={<Checkout />} /> <Route path="/" element={<Home />} /> </Routes> </Router> </div> ); } function Header() { return <h1>Header</h1>; } function Checkout() { return <h1>Checkout</h1>; } function Home() { return <h1>Home</h1>; }