react-router-dom 没有加载 app.js 中的第四个元素

Question

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;

Answer 1

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>;
}