Estoy tratando de enrutar al componente "Productos" desde mi página de inicio según la identificación del producto de la lista de elementos del componente de inicio. Mi página se enruta a 'localhost:3000/id' pero no obtiene el componente Productos. No hay errores a los que me enfrenté. Obtuve los datos de la API falsa y mostré los productos en la página de inicio. Después de hacer clic en el producto, quiero que la página se dirija al componente "Producto". La dirección se enruta como se esperaba, pero el componente no se carga.

 import React, { Component } from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import Products from "./Products"; interface Props {} interface ResponseData { id: number; price: number; description: string; image: string; } interface State { response: ResponseData[]; } export default class Home extends React.PureComponent<Props, State> { constructor(props: Props) { super(props); this.state = { response: [], }; } getProductsData = async () => { const apiResponse = await fetch("https://fakestoreapi.com/products"); console.log(apiResponse); const responseData = await apiResponse.json(); this.setState({ response: responseData, }); }; componentDidMount() { this.getProductsData(); } render() { const { response } = this.state; if (response.length === 0) { return <div className="loader">Loading the items....... </div>; } return ( <div > <div className="product-list"> {response.map((resp) => ( <Switch> <Link className = "product-cards" to={`${resp.id}`} > <Route path={`${resp.id}`} component={Products}/> <div className="product-cards"> <img src={resp.image} /> <div className="product-description">{resp.description}</div> <div className="product-price">{resp.price}</div> </div> </Link> </Switch> ))} </div> </div> ); } }