React-router не отрисовывает компоненты

import './App.css';
import {All_products} from "./Components/All_products";
import {Cart} from "./Components/Cart";
import {Link, Route, BrowserRouter as Router} from "react-router-dom";
import {Product_Detail} from "./Components/Product_Detail";
 
function App() {
  return (<Router>
 
    <div>
        <header className="header">
            <Link to={'/cart'}>Go to my cart</Link>
            <br/>
            <Link to={'/products'}>All products</Link>
        </header>
 
        <Route path={'/cart'} component={Cart}/>
        <Route path={'/products'} component={All_products}/>
        <Route path={'/products/:id'} component={Product_Detail}/>
    </div>
          </Router>);
}
 
export default App;

import React, {useEffect, useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {products_are_loaded} from "../Redux/Action_creators";
import {Link, Route, BrowserRouter as Router} from "react-router-dom";
import {Product_Detail} from "./Product_Detail";
 
export let All_products = () => {
 
    let dispatch = useDispatch();
    let all_products = useSelector(({products_reducer : {all_products}}) => all_products)
 
    let fetchProducts = async () => {
        try {
            let response = await fetch('https://fakestoreapi.com/products');
            let json = await response.json();
            console.log(json)
            dispatch(products_are_loaded(json));
        } catch (error) {
            console.log(error);
        }
    }
 
    useEffect(() => {
        fetchProducts()
    },[])
 
    return (<Router>
            <div className="products_page">
 
            {all_products.map(el =>
            <div key={el.id} className="different_product">
 
                <div>
                    <Link to={`products/${el.id}`}><p>{el.title}</p></Link>
                </div>
 
                <div> <img src={el.image} className="product_image"/> </div>
 
                <div> <button>Add to cart</button> </div>
            </div>)}
 
            </div>
 
            </Router>)
}

import React, {useEffect} from "react";
import {useParams} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {different_product_are_loaded} from "../Redux/Action_creators";
 
export let Product_Detail = () => {
 
    let {id} = useParams();
    let dispatch = useDispatch();
    let product_details = useSelector(({products_reducer : {different_product}}) => different_product);
 
    let fetchProductDifferent = async () => {
        try {
            let response = await fetch(`https://fakestoreapi.com/products/${id}`)
            let json = await response.json();
            dispatch(different_product_are_loaded(json));
        } catch (error) {
            console.log(error);
        }
    }
 
    useEffect(() => {
        fetchProductDifferent()
    },[])
 
 
    return (<div>Product Details</div>)
}

<Route exact={true} path={'/products'} component={All_products}/>