React项目about.js中Link组件点击无响应问题求助

问题描述 #

在React项目中遇到路由问题，about.js文件内的Link组件点击后完全无反应，尝试使用按钮、a标签等方式，点击任何元素都无效。

相关代码 #

App.js #

import './App.css';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Homepage from "../src/pages/homepage";
import About from "./pages/about"
import Navbar from "../src/components/navbar";
function App() {
  return (
    <div className="App">
        <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Homepage />} />
          <Route path="/about" element={<About />} />
        </Routes>
        </Router>
    </div>
  );
}

export default App;

about.js #

import React from 'react';
import { Link } from 'react-router-dom';
function about(){
    return(
        <div>
            <Link to="/" >
                click to go back
            </Link>
        </div>

    );
}
export default about;

问题原因及解决方案 #

核心问题：组件命名不符合React规范 #

React要求组件必须首字母大写，否则会被识别为普通HTML元素，无法正常渲染为React组件。你的about.js中组件函数名是小写的about，导致组件没有被正确挂载，内部的Link自然无法触发路由跳转。

修复步骤 #

1. 修改about.js中的组件命名为大写About，同时导出语句对应调整：

import React from 'react';
import { Link } from 'react-router-dom';

// 组件名首字母大写
function About(){
    return(
        <div>
            <Link to="/" >
                click to go back
            </Link>
        </div>
    );
}

// 导出大写的About组件
export default About;

2. 验证导入路径正确性
   检查App.js中import About from "./pages/about"的路径是否匹配文件实际位置：

• 若App.js在src目录，about.js在src/pages目录，该路径是正确的；
• 若路径不匹配，调整为相对正确的路径（比如../pages/about等）。

3. 确认react-router-dom版本
   你的代码使用了Routes和Route的element属性，这是react-router-dom v6的语法，确保项目安装的是v6版本：

npm list react-router-dom

若版本不符，重新安装v6：

npm install react-router-dom@6

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