React router v. 5.3.0: route component doesn't display-CodePudding

There are three route components. Navbar is always visible and it works fine. The main page, Home, works too and I can click the link to Checkout, but on the Checkout page I can't see any text, images, or anything except the blank background (as well as the Navbar). When I try to wrap the gradient background div around Checkout, it also doesn't work. Renaming the path of Checkout doesn't help as well.

import React from "react"
import './App.css'
import Navbar from './navbar'
import Home from './Home'
import Checkout from "./Checkout"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Switch>
          <div className="gradient__bg">
          <Route exact path='/' component={Home}>
            <Home />
          </Route>
          </div>
          <Route path='checkout' component={Checkout}>
            <Checkout />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

CodePudding user response：

Just make checkout route above the home route

   <Route path='checkout' component={Checkout}>
        <Checkout />
      </Route>
      <Route exact path='/' component={Home}>
        <Home />
      </Route>