I have created a website as a learning project for React learning. I want to navigate from one component to another component whenever I click on the Navbar buttons.

for example, if someone click on contact they needs to navigate to the below contact information as shown in the image.

Navbar is one component and contact is another component. Both are in different path also.

first component

second component

Let me know if any other information you need from my side.

//This is NavBar component location src/component/Contact.js

import classes from "./NavBar.module.css";
import { Link, Router } from "react-router-dom";

const NavBar = (props) => {
  return (
      <div className={classes.navbar}>
        <li className={classes.li}>
          <Link className={classes.a} to={"/Contact"}>
            Contact
          </Link>
        </li>
      </div>
  );
};

export default NavBar;


//This is Contact component location src/component/Contact.js

import classes from "./Contact.module.css";
import { Router, Route } from "react-router-dom";

function Contact() {
  return (
      <footer>
        <div className={classes.contact}>
        <p>Contact Me</p>
    </div>
      </footer>
  );
}

export default Contact;


//This is App Component Location src/UI/App.js

import NavBar from "./components/NavBar";
import Contact from "./components/Contact";


import classes from "./App.module.css";
import { Router, Route } from "react-router";

function App() {
  return (
    <div className={classes.appcontrol}>
    <NavBar />
    <Route path="/Contact">
      <Contact />
    </Route>
    </div>
  );
}

export default App;`