React Router跳转异常排查：点击按钮无法打开AddProjects组件

核心问题 #

1. 缺少路由上下文容器：所有 react-router-dom 相关组件（Link、Routes、Route 等）必须被 BrowserRouter（或同类Router组件）包裹，否则无法获取路由上下文，这是导致错误的主要原因。
2. 组件渲染逻辑错误：Projects 组件直接在 App 中全局渲染，导致访问 /AddProjects 时，Projects 和 AddProjects 会同时显示，不符合页面跳转的预期。

修正后的代码 #

App组件修正后代码

import './App.css';
import React from 'react';
// 导入BrowserRouter提供路由上下文
import { BrowserRouter, Route, Routes } from "react-router-dom";
import AddProjects from './Hero/AddProjects/AddProjects';
import Projects from './Hero/Projects/Projects';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          {/* 根路径对应Projects组件 */}
          <Route path='/' element={<Projects />} />
          {/* /AddProjects路径对应AddProjects组件 */}
          <Route path='/AddProjects' element={<AddProjects />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Projects组件优化（移除无用代码）

你当前的Projects组件里导入了AddProjects但未使用，可删除该行：

// 移除无用导入
// import AddProjects from "../AddProjects/AddProjects";

修复说明 #

• BrowserRouter包裹：为整个应用提供路由上下文，确保Link、Routes等组件能正常工作。
• 路由配置调整：通过Routes定义两个路由规则，实现路径与组件的对应关系，点击Link跳转时会自动切换显示对应组件，避免两个组件同时渲染。
• 清理无用代码：移除未使用的导入，优化代码结构。

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