React router v6 how to get current route in class component

Question

Problem:

React router hooks can be used in function components to retrieve the current route.

However, I can not find any reference for the class component.

Case:

I have a navigation menu and I want to keep track of the current route to highlight it in the front end by switching the css classes according to the current state.

Navigation excerpt:

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

...

export default class Nav extends Component {

    ...

    render = (): JSX.Element => {
        return (
            <>
                {/* Current: "border-green-500 text-gray-900" */}
                {/* Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
                <Link to="/"
                    className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                >
                    Home
                </Link>
            </>
        );
    }

}

Question:

Is there any method to achieve this goal in a react class component?

Expected answer:

Reference to a working example
Code snippet
Explanation why this would not work
Alternative solution

Thank you in advance!

Thanks to @genius fox dev, this solution did work for me!

Solution:

{/* Current: "border-green-500 text-gray-900" */} 
{/* Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
<NavLink // from 'react-router-dom'
    to="/"
    className={ 
        ( {isActive} ) => ( isActive 
            ? 'border-green-500 text-gray-900' 
            : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
        ).concat( ' inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium' )
    }
>
    Home
</NavLink>

genius dev · Accepted Answer · 2022-01-07 11:24:58Z

1

You can use NavLink is supported at react-router-rom v6.0.

First, change the link to navlink, and then show carefully below code.

      <NavLink
        style={({ isActive }) => {
          return {
            display: "block",
            margin: "1rem 0",
            color: isActive ? "red" : ""
          };
        }}
        to={`/invoices/${invoice.number}`}
        key={invoice.number}
      >
        {invoice.name}
      </NavLink>

please, refer to url. https://reactrouter.com/docs/en/v6/getting-started/tutorial#active-links

answered Jan 7, 2022 at 11:24

genius dev

1437 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React router v6 how to get current route in class component

Problem:

Case:

Question:

Expected answer:

Solution:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem:

Case:

Question:

Expected answer:

Solution:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related