React Link标签嵌套Button点击无响应问题求助

你的点击无响应问题主要源于三个核心问题：

1. 未配置React Router的路由规则：React Router v6+ 需要通过 <Routes> 和 <Route> 组件明确映射路径与页面组件的关系，当前代码缺少这部分配置，导致点击Link后没有对应页面可渲染。
2. otherpage.js 中的冗余错误代码：该文件末尾重复写了渲染App和BrowserRouter的逻辑，属于冗余内容，且使用了旧版ReactDOM API，会干扰正常渲染流程。
3. Link 的 to 属性路径错误：使用相对路径 ./otherpage 不符合React Router的路径规范，应使用绝对路径。

具体修改步骤 #

1. 清理 otherpage.js 的冗余代码 #

删除文件末尾的渲染逻辑，仅保留页面组件：

import React from 'react';

export default function OtherPage() {
  return (
    <div>
      <h1>Other Page</h1>
    </div>
  );
}

2. 在 App.js 中配置路由规则 #

导入 Routes 和 Route 组件，用路由包裹页面内容并添加 OtherPage 的映射：

import logo from './logo.svg';
import './App.css';
import donenoti from './donenoti.js';
import errornoti from './errornoti.js';
import infonoti from './infonoti.js';
import pricingCard from './pricecard.js'
import personCard from './personcard.js'
// 新增路由组件导入
import { Routes, Route } from 'react-router-dom';
import OtherPage from './otherpage.js';

function App() {
  return (
    <div className="App">
      <Routes>
        {/* 默认首页路由 */}
        <Route path="/" element={
          <header className="App-header">
            <p className="titleText">mushyUI</p>
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="header">
              Open-Source UI Elements for everyone!
            </h1>
            <p>Github -- <a href="https://github.com/MushyToast/ui">Github</a></p>
            {donenoti("title", "description")}
            {errornoti("title", "description")}
            {infonoti("title", "description")}
            {pricingCard("professional edition", "$19.99", "It is very much professional", "month", "https://www.youtube.com/watch?v=dQw4w9WgXcQ", "https://www.youtube.com/watch?v=dQw4w9WgXcQ")}
            {personCard("Quandale Dingle", "I am a person", "https://mushytoast.tech/assets/imgs/goofycapybara.png")}
          </header>
        } />
        {/* OtherPage路由映射 */}
        <Route path="/otherpage" element={<OtherPage />} />
      </Routes>
    </div>
  );
}

export default App;

3. 修正 pricecard.js 中 Link 的路径 #

将相对路径改为绝对路径：

import { Link } from "react-router-dom";

function pricingCard(title, price, description, timeunit, buylink, learnmorelink) {
  return (
    <div className="pricingcard">
      <h2 className="priceTitle">
        {title}
      </h2>
      <h1 className="price">
        {price}
        <p className="priceTimeUnit">
          /{timeunit}
        </p>
      </h1>
      <p className="priceDescription">
        {description}
      </p>
            
      <span className="priceCardButtons">
        <a href={buylink}> {/*change to your own link */}
          <button className="priceButton">
            Buy Now
          </button>
        </a>
        {/* 修正为绝对路径 */}
        <Link to='/otherpage'>
          <button className="learnMoreButton">
            Learn More
          </button>
        </Link>
      </span>
    </div>
  )
}

export default pricingCard;

完成以上修改后，点击「Learn More」按钮即可正常跳转到OtherPage页面。

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