react-router-dom点击链接不跳转，目标页面内容显示在菜单下方

核心问题 #

1. 路由层级错误：你把页脚导航和<Routes>放在<Router>下作为同级元素，导致点击链接后页脚会一直保留在页面上，目标页面内容直接渲染在页脚下方。
2. 冗余标签干扰：<Link>是React Router提供的专属导航组件，不需要嵌套原生<a>标签，这种嵌套不仅多余，还可能干扰路由跳转逻辑。

修复步骤 #

1. 调整路由结构

将页脚作为全局布局的一部分，让<Routes>专门负责渲染页面主体内容，确保内容区域和页脚层级正确：

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Datenschutz from "./Datenschutz";
import Home from "./Home"; // 假设存在主页组件

function App() {
  return (
    <Router>
      {/* 页面主体内容区 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Datenschutz" element={<Datenschutz />} />
        {/* 其他路由配置 */}
      </Routes>
      {/* 全局页脚导航 */}
      <div
        style={{
          textAlign: "center",
          padding: "20px 0",
          borderTop: "1px solid #eee"
        }}
      >
        <Link style={{ marginRight: "10px", fontSize: "20px" }} to="/">
          Impressum
        </Link>
        <Link style={{ marginRight: "10px", fontSize: "20px" }} to="/Datenschutz">
          Datenschutz
        </Link>
        <Link style={{ marginRight: "10px", fontSize: "20px" }} to="/Kontakt">
          Kontakt
        </Link>
      </div>
    </Router>
  );
}

export default App;

2. 移除冗余的<a>标签

直接用<Link>作为导航元素，无需嵌套原生<a>，既符合React Router规范，也能避免不必要的行为冲突。

3. 可选：固定页脚到页面底部

如果需要页脚始终显示在页面底部，可给外层容器添加flex布局：

<div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
  <Router>
    <Routes>...</Routes>
    {/* 页脚通过marginTop:auto固定到底部 */}
    <div style={{ marginTop: "auto" }}>...</div>
  </Router>
</div>

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