Как сделать точное совпадение NavLink, но при этом что бы get параметры не учитывались?

Question

[Дмитрий Путилов]

Всем привет, возникла вот такая вот проблема
Имеется вот такой вот компонент с NavLink

import React, { FC } from "react";
import { NavLink } from "react-router-dom";
import cs from "classnames";
import classes from "./style.module.scss";

interface IProps {
  path: string;
  title: string;
  Logo: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  classname?: string;
}

export const DynamicLink: FC<IProps> = ({ path, title, Logo, classname }) => {
  return (
    <NavLink
      end={true}
      className={({ isActive }) =>
        cs(classes.dynamicLink, isActive ? classes.active : "", classname)
      }
      to={path}
    >
      <Logo className={classes.icon} />
      <p className={classes.title}>{title}</p>
    </NavLink>
  );
};

Наглядный пример проблемы
При url адресе -> localhost:3000/clips
Все работает шикарно, вот

Вот другая ссылка, переход по ней -> localhost:3000/clips/archive

А вот ссылка с get параметром -> localhost:3000/clips/?page=2


И вот как сделать такое же поведение, что бы на get параметры не обращало внимание, даже если есть какие то get параметры, все равно подсвечивало?

Answer 1

[Алексей Уколов]

Проблема не в get-параметрах, а в "лишнем" слэше на конце.
Библиотека сравнивает всё, что идёт до get с тем, что указано в адресе ссылки и, раз у вас указано end=true, то проверяется ещё и то, что адресом ссылки адрес страницы заканчивается в точности, и слэш на конце в адресе страницы не даёт этой проверке пройти.
Адрес localhost:3000/clips?page=2 должен работать как ожидается.

Comments

[Дмитрий Путилов]

Спасибо большое)