Links Routes

In this tutorial, you will learn how to create links in a React app using the popular library react-router-dom. We will go through a step-by-step guide on installing the library, setting up the router, and creating the Link component for navigation. By the end of this tutorial, you will be able to implement links in your React app that enable seamless navigation without refreshing the page.

Install react-router-dom: Open a terminal in your project directory and run the following command:

      npm install react-router-dom

Or, if you’re using yarn:

       yarn add react-router-dom

Set up the router: In your main app component (usually src/App.js), import the necessary components from react-router-dom and wrap your components with the BrowserRouter:

       import React from 'react';
       import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
       import Home from './components/Home';
       import About from './components/About';
   
       function App() {
         return (
           <Router>
             <div>
               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/about" element={<About />} />
               </Routes>
             </div>
           </Router>
         );
       }
   
       export default App;

Create the Link component: In the component where you want to create the link, import the Link component from react-router-dom and use it to create the link.

       import React from 'react';
       import { Link } from 'react-router-dom';
   
       const Navigation = () => {
         return (
           <nav>
             <ul>
               <li>
                 <Link to="/">Home</Link>
               </li>
               <li>
                 <Link to="/about">About</Link>
               </li>
             </ul>
           </nav>
         );
       };
   
       export default Navigation;

heres how to turn it into a dropdown

Update your NavMenu component: Modify your NavMenu component to include a wrapper <div> with a class name dropdown. Also, add a new element to show the selected menu item and toggle the visibility of the menu list.

   import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const NavMenu = () => {
  const [showMenu, setShowMenu] = useState(false);

  const toggleMenu = () => {
    setShowMenu(!showMenu);
  };

  return (
    <div className="dropdown">
      <button onClick={toggleMenu} className="dropbtn">
        Select a page
      </button>
      {showMenu && (
        <nav className="dropdown-content">
          <ul>
            <li>
              <Link to="/" onClick={toggleMenu}>Promptivate</Link>
            </li>
            <li>
              <Link to="/about" onClick={toggleMenu}>About</Link>
            </li>
            <li>
              <Link to="/home" onClick={toggleMenu}>Home</Link>
            </li>
          </ul>
        </nav>
      )}
    </div>
  );
};

export default NavMenu;

The showMenu state variable is used to manage the visibility of the menu list. The toggleMenu function toggles the value of showMenu when the button is clicked.

Add CSS styles for the dropdown menu: In your CSS file (e.g., styles.css), add the following styles for the dropdown menu:

       .dropdown {
         position: relative;
         display: inline-block;
       }
   
       .dropbtn {
         background-color: #4CAF50;
         color: white;
         padding: 16px;
         font-size: 16px;
         border: none;
       }
   
       .dropdown-content {
         display: none;
         position: absolute;
         background-color: #f1f1f1;
         min-width: 160px;
         box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
         z-index: 1;
       }
   
       .dropdown-content ul {
         list-style: none;
         margin: 0;
         padding: 0;
       }
   
       .dropdown-content li a {
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
       }
   
       .dropdown-content li a:hover {
         background-color: #ddd;
       }

These styles set the position and appearance of the dropdown menu and its button. The .dropdown-content class has a display: none; property by default, which hides the menu list. When the showMenu state is true, the display property is overridden, making the menu list visible.

Bonus!! dropdown