React菜单中Link组件无法跳转至登录页面问题求助

我用基于UL列表的HTML模板搭建React菜单，其中Login链接点击后无法跳转到登录页面，预期应该显示登录页面。已经研究react-router-dom的Link、Routes等内容3小时，试过别人的方案但没用，怀疑是代码结构问题。我是React新手，附上项目结构和各组件代码，问题疑似出在HeaderMenu.js里，求指导。

React渲染后的锚标签为：

<a href="/Login">Login</a>

项目结构 #

/src/Index.js
/src/App.js
/src/components/Home.js
/src/components/header.js
/src/components/HeaderMenu.js
/src/components/Login.js

Index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
            <App />
    </BrowserRouter>
  </React.StrictMode>
);

App.js #

import './App.css';

import Home from "./components/Home";

function App() {
  return ( 
         <>
                <Home />
     </>
  );
}

export default App;

Home.js #

import Header from "./header";
import Body from './body';
import Footer from "./footer";

const Home = () => {
  return ( 
        <div className="page-container">
            <Header />
            <Body />
            <Footer />
        </div>
  );
}

export default Home;

header.js #

import React from 'react';
import HeaderMenu from "./HeaderMenu";


const Header = () => {
    
    return   <>
                <header className="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
                    <div className="container">
                      <div className="row">
                        <div className="col-12">
                          <nav className="main-nav">
                             
                             <HeaderMenu />
                             
                          </nav>
                        </div>
                      </div>
                    </div>
                </header>
              </>
}

HeaderMenu.js #

import React from "react";
import { Routes, Route, Link } from "react-router-dom";
import Login from './Login';

const HeaderMenu = () => {
    return (
        <>
            <ul className="nav">
              <li className="scroll-to-section"><a href="#top" className="active" >Home</a></li>
              <li className="scroll-to-section"><a href="#about">About Us</a></li>
              <li className="scroll-to-section"><a href="#services">Services</a></li>
              <li className=""><Link to="/Login">Login</Link></li>
              <li className="scroll-to-section"><div className="main-red-button"><a href="#contact">Contact Now</a></div></li> 
            </ul>
        </>
            
    )
}

export default HeaderMenu; 

Login.js #

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const Login = () => {

    return (
        <div>
            <h1> Login Page </h1>
        </div>
    );
};

export default Login;

问题原因与解决方法 #

核心问题是未配置路由规则：你已经使用Link组件指定了跳转路径，但整个应用没有定义/Login路径对应的路由映射，导致React无法识别该路径要渲染的组件。

具体修改步骤： #

1. 更新App.js，引入路由组件并配置路径与组件的映射：

import './App.css';
import { Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login";

function App() {
  return ( 
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/Login" element={<Login />} />
    </Routes>
  );
}

export default App;

2. 清理HeaderMenu.js中多余的路由导入，这里只需要Link组件：

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

const HeaderMenu = () => {
    return (
        <>
            <ul className="nav">
              <li className="scroll-to-section"><a href="#top" className="active" >Home</a></li>
              <li className="scroll-to-section"><a href="#about">About Us</a></li>
              <li className="scroll-to-section"><a href="#services">Services</a></li>
              <li className=""><Link to="/Login">Login</Link></li>
              <li className="scroll-to-section"><div className="main-red-button"><a href="#contact">Contact Now</a></div></li> 
            </ul>
        </>
            
    )
}

export default HeaderMenu; 

修改完成后，点击Login链接即可正常跳转到登录页面。

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