Redux, React Router Issue

App component:

...other imports
function App() {
  return (
    <>
      <GlobalStyling />

      <Router>
        <ScrollToTop />
        <Layout>
          <Switch>
            <Route exact path="/" component={Art} />

            <Route exact path="/about" component={About} />
            <Route exact path="/contact" component={Contact} />
            <Route exact path="/privacy" component={Privacy} />
            <Route exact path="/help" component={Help} />

            <Route exact path="/cart" component={Cart} />
            <Route
              component={localStorage.jwtTokenSchroeders ? Art : NotFound}
            />
          </Switch>
        </Layout>
      </Router>
    </>
  );
}

export default App;

----------------------------------------------

Cart Component:

const Cart = props => {
  const { newProduct, productToRemove, productToChange } = props;
  const prevNewProduct = usePrevious(newProduct);
  const prevProductToRemove = usePrevious(productToRemove);
  const prevProductToChange = usePrevious(productToChange);

  useEffect(() => {
    if (prevNewProduct !== newProduct) {
      addProductHandler(newProduct);
    }
  }, [newProduct]);
  useEffect(() => {
    if (prevProductToRemove !== productToRemove) {
      removeProductHandler(productToRemove);
    }
  }, [productToRemove]);

  useEffect(() => {
    if (prevProductToChange !== productToChange) {
      changeProductQuantityHandler(productToChange);
    }
  }, [productToChange]);

  const addProductHandler = product => {
    const { cartProducts, updateCart } = props;
    let productAlreadyInCart = false;

    cartProducts.forEach(cp => {
      if (cp.id === product.id) {
        cp.quantity += product.quantity;
        productAlreadyInCart = true;
      }
    });

    if (!productAlreadyInCart) {
      cartProducts.push(product);
    }

    updateCart(cartProducts);
  };

  const removeProductHandler = product => {
    const { cartProducts, updateCart } = props;

    const index = cartProducts.findIndex(p => p.id === product.id);
    if (index >= 0) {
      cartProducts.splice(index, 1);
      updateCart(cartProducts);
    }
  };

  const changeProductQuantityHandler = changedProduct => {
    const { cartProducts, updateCart } = props;

    const product = cartProducts.find(p => p.id === changedProduct.id);
    product.quantity = changedProduct.quantity;
    if (product.quantity <= 0) {
      removeProductHandler(product);
    }
    updateCart(cartProducts);
  };

  const products = props.cartProducts.map(p => {
    return (
      <CartProduct
        product={p}
        removeProduct={props.removeProduct}
        changeProductQuantity={props.changeProductQuantity}
        key={p.id}
      />
    );
  });

  return (
    <>
      <CartView>
        {products}
        {!products.length && (
          <p>
            Add some products in the cart <br />
            :)
          </p>
        )}
      </CartView>
    </>
  );
};

-----------------------------------------------

Cart Actions:

import {
  LOAD_CART,
  ADD_PRODUCT,
  REMOVE_PRODUCT,
  CHANGE_PRODUCT_QUANTITY
} from "./actionTypes";

export const loadCart = products => ({
  type: LOAD_CART,
  payload: products
});

export const addProduct = product => ({
  type: ADD_PRODUCT,
  payload: product
});

export const removeProduct = product => ({
  type: REMOVE_PRODUCT,
  payload: product
});

export const changeProductQuantity = product => ({
  type: CHANGE_PRODUCT_QUANTITY,
  payload: product
});

-------------------------------

Cart Reducer:

import {
  LOAD_CART,
  ADD_PRODUCT,
  REMOVE_PRODUCT,
  CHANGE_PRODUCT_QUANTITY
} from "./actionTypes";

const initialState = {
  products: []
};

export default function(state = initialState, action) {
  switch (action.type) {
    case LOAD_CART:
      return {
        ...state,
        products: action.payload
      };
    case ADD_PRODUCT:
      return {
        ...state,
        productToAdd: Object.assign({}, action.payload)
      };
    case REMOVE_PRODUCT:
      return {
        ...state,
        productToRemove: Object.assign({}, action.payload)
      };
    case CHANGE_PRODUCT_QUANTITY:
      return {
        ...state,
        productToChange: Object.assign({}, action.payload)
      };
    default:
      return state;
  }
}