React link in menu does not open the page-CodePudding

I have a menu with a "login" link to open to the login page. When I click on the "login" link it does nothing...doesn't open page, just empty click. My expectation was that the login page would be displayed. I am using an existing html template that uses UL lists for the menu. I'd like to keep using the UL list for the menu, if possible, as it fits in the existing CSS and layout of the page nicely.

I've researched react-router-dom, links, routes, etc for the last 3 hours...I can't find a solution for this, I see how others made it work somehow for their project, but when I try the solutions in my project it doesn't work for me...perhaps I've got something out of order? I'm new to react, but have read/watched a bunch of tutorials and would welcome any advice or guidance.

The problem appears to be inside "HeaderMenu.js". I've included the details of the components. thanks in advance.

The rendered anchor tag looks like this after React renders it:

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

Here is how the project is set up:

Folder Structure

/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;

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

const Login = () => {

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

export default Login;

CodePudding user response：

You have to define routes. Like on which route, which component has to be render. For example: for "/login" you want to define a route in "app.js" file. Like below:

import "./App.css";

import Home from "./components/Home";

import { BrowserRouter, Routes, Route } from "react-router-dom";
// import all page components like following
// import Login from "./components/Login";

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

export default App;