When I try to run the following code, only the header element shows on the main page or only the home element, but not together.
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;
If you wish for Header to be always shown, just take it out of Router component. Stackblitz
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>;
}