I am trying to use NavLink in react typescript project, however, it's getting an error. Property 'activeStyle' does not exist on type 'IntrinsicAttributes & NavLinkProps & RefAttributes'.

import React from 'react'
import { NavLink } from 'react-router-dom'

export default function Nav () {
  return (
        <nav className='row space-between'>
          <ul className='row nav'>
            <li>
              <NavLink
                to='/'
                activeStyle={{
                  textDecoration: 'none',
                  color: 'red'
                }}
                className='nav-link'>
                Top
              </NavLink>
            </li>
            <li>
              <NavLink
                to='/new'
                className='nav-link'>
                New
              </NavLink>
            </li>
          </ul>
          
        </nav>
  )
}

CodePudding user response：

activeStyle is deprecated in v6. You can use style function like this:

<NavLink
 to='/'
 className='nav-link'
 style={
  ({isActive}) => (
   isActive 
   ? {
      textDecoration: 'none',
      color: 'red'
     }
   :{}
   )
 }
>
Top
</NavLink>

Code Sandbox

CodePudding user response：

The NavLink API changed a bit in RRDv6, there is no longer an activeStyle prop.

NavLink

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

You can conditionally apply your active class via a style or className prop function. Using the style prop.

const isActiveStyle = {
  textDecoration: 'none',
  color: 'red'
};

...

<NavLink
  style={({ isActive }) => isActive ? isActiveStyle : {}}
  to="/"
>
  Top
</NavLink>