Reactjs : react-router change url Link without reloading page & when (cart.lenght === 0) is true nothing is loaded

I have included a "Payment" component to the cart in my project. When the person finishes choosing his products, he or she can then pay by clicking on pay. But if I click "Payment" nothing is displayed on the screen although the url changes. In addition I try to add another test component but it refuses. In addition, I have a problem with the condition "cart.length===0", if this condition is verified(true), I can't display anything.

Thanks for the help

{/* PAYMENT COMPONENT */}
import React, { Component } from "react";

class Payement extends Component {
  render() {
    return <h1 style=>PAYMENT COMPONENT</h1>;
  }
}

export default Payement;

{/* SECTION COMPONENT */}
import { Switch, Route } from "react-router-dom";
import Cart from "../Section/Cart";
import Details from "../Section/Details";
import Payement from "../Section/Payement";
import Products from "../Section/Products";

export class Section extends Component {
  render() {
    return (
      <section>
        <Switch>
          {/* <Route path="/" component={Products} exact /> */}
          <Route path={"/product"} component={Products} exact />
          <Route path={"/product/:id"} component={Details} />
          <Route path={"/cart"} component={Cart} />
          <Route path={"/payment"} component={Payement} />
        </Switch>
      </section>
    );
  }
}

export default Section;

{/* CART COMPONENT */}

import React, { Component } from "react";

import { DataContext } from "../layouts/Context";
import Colors from "./Colors";
import "../css/Cart.css";
import "../css/Details.css";
import { Link } from "react-router-dom";

export class Cart extends Component {
  static contextType = DataContext;

  componentDidMount() {
    console.log(this.context);
  }
  render() {
    const { cart } = this.context;
    const { increase, reduction, removeProduct } = this.context;

    if (cart.length === 0) {
      return <h2 style=>Nothings Product</h2>;
    } else {
      return (
        <>
          {cart.map((item) => (
            <div className="details cart" key={item._id}>
              <div className="box">
                <img src={item.src} alt="" />
                <div className="row">
                  <h1>{item.title}</h1>
                  <p className="price">{item.price * item.count} $</p>
                </div>
                <Colors colors={item.colors} />
                <p>{item.description}</p>
                <p>{item.content}</p>
                <div className="amount">
                  <button className="count" onClick={() => reduction(item._id)}>
                    {" "}
                    -{" "}
                  </button>
                  <span>{item.count}</span>
                  <button className="count" onClick={() => increase(item._id)}>
                    {" "}
                    +{" "}
                  </button>
                </div>
              </div>
              <div className="delete" onClick={() => removeProduct(item._id)}>
                X
              </div>
            </div>
          ))}
          <div className="total">
            <Link to="/payment">Payement</Link>
            <h3>Total: 0</h3>
          </div>
        </>
      );
    }
  }
}

export default Cart;

{/* APP COMPONENT */}
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import AppFooter from "./components/layouts/AppFooter";
import AppNavbar from "./components/layouts/AppNavbar";
import { DataProvider } from "./components/layouts/Context";
import Section from "./components/layouts/Section";

function App() {
  return (
    <div>
      <DataProvider>
        <Router>
          <AppNavbar />
          <Section />
          <AppFooter />
        </Router>
      </DataProvider>
    </div>
  );
}

export default App;