无法使用 React-Router-DOM 路由到所需的 React 组件答案

【问题标题】：Cannot route to required React Component using React-Router-DOM无法使用 React-Router-DOM 路由到所需的 React 组件
【发布时间】：2021-11-11 04:35:03
【问题描述】：

我正在尝试根据主页组件的项目列表中的产品 ID 从我的主页路由到组件“产品”。我的页面被路由到 'localhost:3000/id' 但它没有得到 Products 组件。我没有遇到任何错误。我从虚假 API 中获取数据并在主页上显示产品。单击产品后，我希望页面路由到“产品”组件。地址按预期路由，但组件未加载。

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>
    );
   }
 }

【问题讨论】：

这里我们可能需要更多的上下文。能给我们提供一个更完整更全面的代码示例吗？您能否更详细地解释什么没有按预期工作？有错误吗？观察到的与预期的结果是什么？您已经采取了哪些调试步骤？您是否正在渲染任何其他路线？您正在映射的response 的值是多少？
我添加了完整的代码并更好地解释了我的查询。我是否需要提供有关此的更多信息或者这是否足够？
对不起，除了我可以查询"https://fakestoreapi.com/products" API 返回的内容之外，我认为这并没有真正添加任何有用的信息。你为什么要在链接内渲染路由？什么是渲染Home？你在哪里渲染 Router 和你想从链接导航到的路线？
我的查询已解决。我的错误是试图在链接内路由。添加一个外部路由文件解决了这个问题，我可以让它按照我的要求工作。
太棒了！我投票关闭为“不可复制或由错字引起”。干杯。

标签： javascript reactjs react-router-dom

【解决方案1】：

您可能需要将您的切换路由替换为 App 组件，并在此 Home 组件中使用链接重定向到您想要的路径。

function App() {
  return (
    <Switch>
      <Route exact path="/" component={ Home } />
      <Route path="/:id" component={ Products } />
    </Switch>
  );
}

Home 组件返回应该是这样的：

return (
  <div className="product-list">
    {response.map((resp) => (
      <Link
        className = "product-cards" 
        to={`/${resp.id}`}
      >
        <div className="product-cards">
          <img src={resp.image} />
          <div className="product-description">{resp.description}</div>
          <div className="product-price">{resp.price}</div>
        </div>
      </Link>
    ))}
  </div>
);

【讨论】：