Chakra UI React _activeLink props not working

Question

I make react app using UI library. I use react-router-dom v6 for the Router and Chakra UI as library. My app can navigate to each component properly. But, I want to make the link that "active" has a different style.

Here is my header:

import { Flex, Link, Icon } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';

Here is link part of my code:

<Link as={RouterLink} to="/dashboard" p={2} _activeLink={{fontWeight:'bold'}}>
  <Flex justifyContent="flex-start" ml={4} fontSize='1.25rem' alignItems="center">
    <Icon as={FaHome} mr={2} />
    Dashboard
  </Flex>
</Link>

I use _activeLink props to make the active class for link, but it's not working. I even try to change the background color and text color. But nothing changed. I don't know if I am wrong at import the library or there is something else on my code. Could anyone give me solution for this?

Answer 1

The react-router-dom Link component doesn't have any "active" styling. Use the NavLink component.

import { Flex, Link, Icon } from "@chakra-ui/react";
import {
  BrowserRouter as Router,
  NavLink as RouterLink // <-- import the NavLink component
} from "react-router-dom";

...

<Link
  as={RouterLink}
  to="/dashboard"
  p={2}
  _activeLink={{ fontWeight: "bold" }}
>
  <Flex
    justifyContent="flex-start"
    ml={4}
    fontSize="1.25rem"
    alignItems="center"
  >
    <Icon as={FaHome} mr={2} />
    Dashboard
  </Flex>
</Link>