Type '{ children: string; exact: true; activeClassName: string; className: string; to: string; }' is not assignable to type 'IntrinsicAttributes & Nav

In react-router-dom@6 the NavLink component hasn't any activeClassName and exact props.

NavLink

declare function NavLink(
  props: NavLinkProps
): React.ReactElement;

interface NavLinkProps
  extends Omit<
    LinkProps,
    "className" | "style" | "children"
  > {
  caseSensitive?: boolean;
  children?:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  className?:
    | string
    | ((props: {
        isActive: boolean;
      }) => string | undefined);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: {
        isActive: boolean;
      }) => React.CSSProperties);
}

Remove the activeClassName prop from your links. If you still need to apply an active class then use a function on the className prop and access the isActive prop.

import { NavLink } from "react-router-dom";
import '../styles/styles-pages/navigation.scss'

export const Navigation = () => {
  return (
    <div id="navigation_div_container">
        <NavLink
          className={({ isActive }) =>
            [
              "link_nav",
              isActive ? "active" : null,
            ]
              .filter(Boolean)
              .join(" ")
          }
          end // <-- prevents matching on sub-routes, similar to exact
          to="/"
        >
          Home
        </NavLink>
        <NavLink
          className={({ isActive }) =>
            [
              "link_nav",
              isActive ? "active" : null,
            ]
              .filter(Boolean)
              .join(" ")
          }
          to="/discution"
        >
          Discution
        </NavLink>
    </div>
  );
};