React中购买按钮无法加载组件及路由跳转异常问题求助

嗨，我来帮你梳理下当前的问题，然后一步步给出解决方案：

你现在碰到两个核心问题：一是按钮加了href导致页面直接硬跳转，自定义的BuyComponent根本没机会显示；二是你试图在事件处理函数里返回组件来触发渲染，这完全不符合React的渲染逻辑。

先拆解问题根源 #

1. href触发原生页面跳转：给Button加href='/buy'会让浏览器直接刷新页面，这就绕过了React的单页应用机制，你的BuyComponent自然没法在跳转后的页面里显示了。
2. 事件回调返回组件无效：React的组件渲染是由状态驱动的，事件处理函数只能修改状态，不能直接返回组件来触发渲染——你写的onBuyClicked里返回<BuyComponent/>根本不会被React识别。

具体修改方案 #

1. 调整路由结构：Router要放在根层级 #

首先把FunctionalProductCardComponent里的<Router>删掉！Router应该放在整个应用的最外层（比如App.js里），这样所有子组件都能共享路由上下文，不用在每个卡片里重复嵌套。

2. 用状态控制BuyComponent的显示 #

在包含onBuyClicked的父组件里，添加一个状态来控制BuyComponent的显示/隐藏，同时保存选中的产品数据。

3. 用React Router的方式修改URL #

不要用href，改用history.push('/buy')来修改URL，这样不会触发页面刷新，只是更新路由状态。

修改后的完整代码示例 #

父组件（包含onBuyClicked的那个组件）

import React, { Component } from 'react';
import BuyComponent from './BuyComponent';
import FunctionalProductCardComponent from './FunctionalProductCardComponent';
// 如果父组件没拿到history，需要用withRouter包裹
import { withRouter } from 'react-router-dom';

class ParentComponent extends Component {
  state = {
    isBuyPanelOpen: false,
    selectedProduct: null,
  };

  onBuyClicked = (productData) => {
    // 保存选中的产品数据，同时打开面板
    this.setState({
      selectedProduct: productData,
      isBuyPanelOpen: true,
    });
    // 修改路由URL，不会刷新页面
    this.props.history.push('/buy');
  };

  closeBuyPanel = () => {
    this.setState({ isBuyPanelOpen: false });
    // 可选：关闭时回到之前的页面
    // this.props.history.goBack();
  };

  render() {
    return (
      <div>
        {/* 传递产品数据和点击回调给卡片组件 */}
        <FunctionalProductCardComponent 
          product={yourProductData} 
          onClick={this.onBuyClicked} 
        />
        {/* 根据状态渲染BuyComponent */}
        {this.state.isBuyPanelOpen && (
          <BuyComponent 
            product={this.state.selectedProduct}
            onClose={this.closeBuyPanel} 
          />
        )}
      </div>
    );
  }
}

// 用withRouter包裹，让父组件拿到history对象
export default withRouter(ParentComponent);

FunctionalProductCardComponent 优化

去掉冗余的Router，直接组装产品数据传递给父组件：

import React from 'react';
import { Button, Col } from 'react-bootstrap'; // 假设你用的是React Bootstrap

const FunctionalProductCardComponent = props => {
  const handleBuyClick = () => {
    // 组装需要的产品数据（确保chosenSize、chosenColor在组件内可用）
    const productData = {
      id: props.product._id,
      price: props.product.price,
      serial: props.product.serial,
      size: chosenSize,
      color: chosenColor,
    };
    // 调用父组件的回调
    props.onClick(productData);
  };

  return (
    <div id="ProductCard">
      <Col>
        {/* 去掉href，只保留点击事件 */}
        <Button onClick={handleBuyClick}>Buy</Button>
      </Col>
    </div>
  );
};

export default FunctionalProductCardComponent;

BuyComponent 优化（添加关闭功能）

import React, { Component } from 'react';
import './buy.component.scss';

export default class BuyComponent extends Component {
  render() {
    return(
      <div id="buyComponentTesting">
        <h3>购买面板</h3>
        <p>产品ID：{this.props.product.id}</p>
        <p>价格：{this.props.product.price}</p>
        <button onClick={this.props.onClose}>关闭</button>
      </div>
    );
  }
}

调整BuyComponent的CSS（让弹窗居中）

原来的margin:50%定位不太对，改成固定定位让它居中显示：

#buyComponentTesting{
  background-color: blue;
  z-index: 10;
  width: 200px;
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  box-sizing: border-box;
}

这样修改后，点击按钮会实现三个效果：

1. 把选中的产品数据传递给父组件
2. 父组件通过状态渲染BuyComponent（蓝色面板）
3. 路由URL更新为/buy，但不会触发页面刷新

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