ReactJS点击商品图片无法跳转至对应详情页问题排查求助

核心问题1：Router重复嵌套 #

你在每个Product组件内部都单独包裹了<Router>组件，这是错误用法：React Router要求整个应用只能有一个顶层Router实例（通常放在入口文件index.js或App.js外层），每个商品内部的局部Router会导致Link的跳转仅作用在当前组件的独立路由实例中，全局路由无法捕获跳转动作，所以点击后无响应。

其他错误（不影响跳转但会导致功能/样式异常） #

• <ProductWrapper>上的属性写成了clasName，缺少字母s，应该改为className，否则绑定的样式不生效
• 购物车图标<i>标签用了原生的class属性，React中需要改为className才会生效

修复步骤 #

1. 删掉Product.js里包裹<Link>的<Router>标签，保留外层全局的Router即可
2. 可选优化：将img的点击事件移到<Link>标签上，避免点击事件和跳转的执行顺序异常
3. 修复上文提到的两处拼写错误
4. 确认入口文件外层已经包裹了全局Router（如果没加需要补上）

修复后核心代码 #

Product.js #

class Product extends React.Component {
  render() {
    const { id, title, img, price, inCart } = this.props.product;
    return (
      <ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3 my-3">
        <div className="card">
          <ProductContext.Consumer>
            {(value) => (
              <div className="img-container p-5">
                {/* 移除了内部多余的Router标签，点击事件移到Link上 */}
                <Link to="/details" onClick={() => value.handleDetail(id)}>
                  <img
                    src={img}
                    alt="product"
                    className="card-img-top"
                  />
                </Link>
                <button
                  className="cart-btn"
                  onClick={() => value.addToCart(id)}
                  disabled={inCart ? true : false}
                >
                  {inCart ? (
                    <p className="text-capitalize mb-0">In Cart</p>
                  ) : (
                    <i className="fas fa-cart-plus"></i>
                  )}
                </button>
              </div>
            )}
          </ProductContext.Consumer>
          <div className="card-footer d-flex justify-content-between">
            <p className="align-self-center mb-0">{title}</p>
            <h5 className="text-blue mb-0">
              <span className="mr-1">$</span>
              {price}
            </h5>
          </div>
        </div>
      </ProductWrapper>
    );
  }
}

入口文件index.js全局Router示例 #

import { BrowserRouter as Router } from 'react-router-dom';
import ProductProvider from './context.js';

ReactDOM.render(
  <ProductProvider>
    <Router>
      <App />
    </Router>
  </ProductProvider>,
  document.getElementById('root')
);

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