Change Navbar CSS on button click TypeScript React-CodePudding

I want to change the button style of my navbar depending on which page the navbar is on so I'm setting onclick handler functions that update useref on click but the buttons aren't updating.

Here's my code:

import { Button, Container, Nav, Navbar as NavbarBs } from "react-bootstrap";
import { NavLink } from "react-router-dom";
import CSS from "csstype";
import { useEffect, useRef } from "react";

export function Navbar() {
  const buttonDesign = useRef("");

  useEffect(() => {});

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    const text = e.currentTarget.firstChild?.textContent;
    if (text === "Home") {
      console.log(text);
      buttonDesign.current = "outline-danger";
    } else if (text === "Store") {
      console.log(text);
      buttonDesign.current = "outline-dark";
    }
    // Do something
  };

  return (
    <NavbarBs
      fixed="top"
      style={{
        height: "5vh",
        position: "fixed",
        width: "100%",
        background: "transparent",
      }}
    >
      <Container>
        <Nav className="d-flex justify-content-between w-100">
          <Nav.Link to={"/"} as={NavLink}>
            <Button
              variant={buttonDesign.current}
              style={{
                outline: "none",
                padding: "5px 50px 5px 50px",
                fontFamily: "Playfair Display, serif",
                fontSize: "1rem",
              }}
              onClick={handleClick}
            >
              Home
            </Button>
          </Nav.Link>
          <Nav.Link to={"/store"} as={NavLink}>
            <Button
              variant={buttonDesign.current}
              style={{
                outline: "none",
                padding: "5px 50px 5px 50px",
                fontFamily: "Playfair Display, serif",
                fontSize: "1rem",
              }}
              onClick={handleClick}
            >
              Store
            </Button>
          </Nav.Link>
          <Nav.Link to={"/about"} as={NavLink} style={{ color: "white" }}>
            <Button
              variant={buttonDesign.current}
              style={{
                outline: "none",
                padding: "5px 50px 5px 50px",
                fontFamily: "Playfair Display, serif",
                fontSize: "1rem",
              }}
            >
              About
            </Button>
          </Nav.Link>
        </Nav>
      </Container>
    </NavbarBs>
  );
}

I tried adding a handler function to update the useref on every click but the css isn't being updated on every re-render.

CodePudding user response：

If the goal is to set button variant depending on which page the user is on, simply use the location hook provided by react-router instead of handling clicks.

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

In the component:

const location = useLocation();
const btnDesign = location.pathname === "/" ? "outline-danger" : "outline-dark";

In the button:

variant={btnDesign}

The pathname will be updated by the location hook from react router to keep it updated. More logic can be added if there are more than 2 variants to choose from.