on click active nav link next js

I'm new in react. I've got a sidebar with a few page links. Now I'm trying to achieve, when I'll click on any link it'll take an active class. How can I achieve this? If anyone helps me with this I'll be very very thankful. Thanks in advance.

Here are my codes

import React, { useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import sideData from './sideData';

const Sidebar = () => {

    const router = useRouter()

    const [side, setSide] = useState(false);

    const handleSide = () => {
        setSide(side => !side);
    }

    return (
        <>
            <div className={"sidebar" + (side ? " sidebar-active" : "")}>
                <ul>
                    {sideData.map((item, index) => {
                        return (
                            <li key={index}>
                                <Link href={item.path} className={router.pathname === item.path ? " link-active" : 'link'}>
                                    <a>{item.title}</a>
                                </Link>
                            </li>
                        )
                    })}
                </ul>
            </div>
        </>
    );
}

export default Sidebar;

Via Active questions tagged javascript - Stack Overflow https://ift.tt/rvyiqQR