Class Based TypeScript React.Component - Locale Switcher Menu

LocaleSwitcher.tsx

import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

type Locale = {
  locale: string;
  label: string;
};

type Props = {
  locales: Locale[];
};

class LocaleMenu extends React.Component<Props> {
  render() {
    const { locales } = this.props;
    const router = useRouter();
    const { pathname, query } = router;

    return (
      <nav>
        <ul>
          {locales.map(locale => (
            <li key={locale.locale}>
              <Link href={{ pathname, query }} locale={locale.locale}>
                <a className={locale.locale === router.locale ? 'active' : ''}>{locale.label}</a>
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    );
  }
}

export default LocaleMenu;