I cannot get the About Component to display on React

Question

I am trying to have my React code display. I followed an ecommerce website YouTube tutorial and I have tried everything to get it to display. I have read up on React routers and switches, but I really cant spot my mistake.

The Switch and Router

<Switch>
    <Route exact path="/">
        <Products
            products={products}
            onAddToCart={handleAddToCart}
            handleUpdateCartQty
        />
    </Route>
    <Route exact path="/about">
        <About About={About} />
    </Route>
    <Route exact path="/cart">
        <Cart
            cart={cart}
            handleUpdateCartQty={handleUpdateCartQty}
            handleRemoveFromCart={handleRemoveFromCart}
            handleEmptyCart={handleEmptyCart}
        />
    </Route>
    <Route exact path="/checkout" exact>
        <Checkout
            cart={cart}
            order={order}
            onCaptureCheckout={handleCaptureCheckout}
            error={errorMessage}
        />
    </Route>
</Switch>;

The About component

import React from 'react';

const About = () => {
    return <div>Tacos are delicious</div>;
};

export default About;

Answer 1

Try this:

<Route exact path="/about"> 
  <About />
</Route>

You seem to be passing an unnecessary prop by the same name as the component.