React Router doesn't work, but no errors were detected

Question

I'm trying to switch to each individual product from the All_Products component to the Product_Detail component. What is a field like imageUrl and name, I'm sure. The fact is that the transition is to the page, but the data is not rendered. What is my mistake?

App.js

import './App.css';
import {Header} from "./Components/Header";
import {All_Products} from "./Components/All_Products";
import {Product_Details} from "./Components/Product_Details";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";

function App() {
return <Router>
<Header/>

  <Switch>
  <div>
      <Route path="/" exact>
          <All_Products/>
      </Route>

      <Route path="/todos/:id">
          <Product_Details/>
      </Route>
  </div>
  </Switch>
    </Router>;
}
export default App;

Product_Detail.js

import React, {useEffect} from "react";
import {useParams} from "react-router-dom";

export let Product_Details = () => {
let [differentProduct, setDifferentProduct] = React.useState([]);

let {id} = useParams();

let fetch_Different_Product = async () => {
    let response = await fetch(`https://613c5527270b96001798b0af.mockapi.io/api/v1/products${id}`);
    let json = await response.json();
    setDifferentProduct(json)
    console.log(json)
}

useEffect(() => {
    fetch_Different_Product();
},[id])


return (<div>
    {differentProduct && (<div>{differentProduct.name} <img src={differentProduct.imageUrl}/></div>)}
        </div>)
}

All_Products.js

import React, {useEffect, useState} from "react";
import {Link} from "react-router-dom";

export let All_Products = () => {

let [products, setProducts] = useState([]);

let fetchProducts = async () => {
    let response = await fetch('https://613c5527270b96001798b0af.mockapi.io/api/v1/products');
    let data = await response.json();
    setProducts(data);
}

useEffect(() => {
   fetchProducts();
},[])

return (<div>
    {products.map(el => <div key={el.id}>
                <img src={el.imageUrl}/>
                <Link to={`/products/${el.id}`}>{el.name}</Link>
                        </div>)}
        </div>)
}

Answer 1

You've got a few missing characters in your code

• Add a / before ${id}:

let response = await fetch(`https://613c5527270b96001798b0af.mockapi.io/api/v1/products/${id}`);

• You navigate to products but declare your route to todos:

<Route path="/products/:id">  //<-- Update to "products"
  <Product_Details />
</Route>;

Working Example: