<Link to="/signup" className="btn btn-primary">Sign up</Link>

import React from 'react';

import { useNavigate } from "react-router-dom";

function LoginLayout() {

  let navigate = useNavigate(); 

  const routeChange = () =>{ 

    let path = `newPath`; 

    navigate(path);

  }

  return (

     <div className="app flex-row align-items-center">

      <Container>

      ...          

          <Button color="primary" className="px-4"

            onClick={routeChange}

              >

              Login

            </Button>

      ...

       </Container>

    </div>

  );

}}

import React from "react";

// importing Link from react-router-dom to navigate to 

// different end points.

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

const Home = () => {

  return (

    <div>

      <h1>Home Page</h1>

      <br />

      <ul>

        <li>

          {/* Endpoint to route to Home component */}

          <Link to="/">Home</Link>

        </li>

        <li>

          {/* Endpoint to route to About component */}

          <Link to="/about">About</Link>

        </li>

        <li>

          {/* Endpoint to route to Contact Us component */}

          <Link to="/contactus">Contact Us</Link>

        </li>

      </ul>

    </div>

  );

};

export default Home;

<a href ="https://www.theguardian.com/technology/2020/nov/13/macos-11-big-sur-review-the-mac-ipad-ified-for-the-future" class="button"/>