使用React-Router-DOM无法路由加载目标React Component问题求助

问题根因 #

• 你错误将Route和Switch嵌套在商品列表的map循环内部，还把Route放在了Link标签内，不符合react-router-dom v5的使用规范，路由匹配规则不会生效。
• 没有将整个应用的路由逻辑放在根级Router包裹下，仅在Home组件内部写Switch和Route无法完成匹配。
• 没有使用动态路由通配符:id，也没有将Products组件的路由和Home组件的路由平级放在全局路由配置中，路径匹配不到对应组件。

修正步骤 #

第一步：调整全局路由结构 #

把路由配置抽离到根组件（通常为App.tsx），统一管理路由匹配规则，示例代码如下：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home';
import Products from './Products';

export default function App() {
  return (
    <Router>
      <Switch>
        {/* 首页路由需加exact精准匹配 */}
        <Route exact path="/" component={Home} />
        {/* 商品详情页用:id接收动态路由参数 */}
        <Route path="/:id" component={Products} />
      </Switch>
    </Router>
  )
}

第二步：改写Home组件代码 #

删掉Home组件内部多余的Switch、Route标签，仅保留Link跳转逻辑即可，修正后的代码如下：

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

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");
    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) => (
            // 跳转路径前加/避免出现相对路径叠加问题，同时给循环项加key属性
            <Link className="product-cards" to={`/${resp.id}`} key={resp.id}>
              <div className="product-cards">
                <img src={resp.image} alt={resp.description} />
                <div className="product-description">{resp.description}</div>
                <div className="product-price">{resp.price}</div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者isayan58