activeStyle is not a valid property for type 'IntrinsicAttributes'

I encountered an issue while attempting to utilize NavLink in a react typescript project. The error message states: "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>
  )
}
typescriptreact-router-dom

Answer №1

activeStyle has been deprecated in the latest version (v6) of React Router. You can now achieve the same functionality using the style function as shown below:

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

Code Sandbox

Answer №2

The NavLink component in RRDv6 has undergone some changes, including the removal of theactiveStyle property.

Learn more about NavLink API

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);
}

To apply your active class conditionally, you can use a style or className function with the style prop.

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

...

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a default value for a complex prop in Vue through Type-based props declarations

I'm struggling with this issue: Argument of type 'HelloWorldProps' is not assignable to parameter of type 'InferDefaults<LooseRequired<HelloWorldProps>>'. Types of property 'complexProp' are incompatible.ts( ...

typescriptvue.jsvuejs3vue-props

The .slice() function in TypeScript has the ability to alter the initial array

I am diving into TypeScript and just tackled my first slice() method. My understanding is that the slice() method is supposed to create a copy of an array. Here's a snippet of the code: class ChapterOne { // Gauss Jordan Elimination // No ...

arraystypescriptslice

Tips for having tsc Resolve Absolute Paths in Module Imports with baseUrl Setting

In a typescript project, imagine the following organizational structure: | package.json | tsconfig.json | \---src | app.ts | \---foobar Foo.ts Bar.ts The tsconfig.json file is set up t ...

typescripttypescript2.0tsctsconfig

Maximize the benefits of using React with Typescript by utilizing assignable type for RefObject

I am currently working with React, Typescript, and Material UI. My goal is to pass a ref as a prop. Within WidgetDialog, I have the following: export interface WidgetDialogProps { .... ref?: React.RefObject<HTMLDivElement>; } .... <div d ...

reactjstypescriptmaterial-ui

Utilizing Router Outlet in Angular to Access API Data

I've encountered an issue where I can't pass parent data from the ngOnInit route params to my child component, user-seminar. After some research and searching on Google, I found a solution involving services. To address this problem, I modified ...

angulartypescriptangular11router-outlet

Designing a platform for dynamic components in react-native - the ultimate wrapper for all elements

export interface IWEProps { accessibilityLabel: string; onPress?: ((status: string | undefined) => void) | undefined; localePrefix: string; children: JSX.Element[]; style: IWEStyle; type?: string; } class WrappingElement extends React.Pure ...

javascriptreactjstypescriptreact-native

The superclass defines the type of the subclass

There is an abstract typescript class like this: abstract class Abstract { constructor (public parent?: Abstract) { } } Then, two subclasses are defined as follows: class Sub1 extends Abstract { } class Sub2 extends Abstract { } The issue aris ...

typescriptinheritance

Tips for Looping through an Object within another Object

Is there a way to retrieve values from an Object that contains another Object nested inside? I am not overly concerned about the keys, but it would be helpful if I could access them as well. Here is an example of the response: res = {data: {name: 'na ...

javascriptangulartypescript

What is the best way to incorporate an AJAX GET request into an HTML element?

Currently, I am attempting to execute a JavaScript code that will convert all <a></a> elements found within another element <b></b> (the specific name in the HTML) into links that trigger an HTTP get request. However, the code I hav ...

javascripthtmltypescript

What is the best way to implement a condition within an ngFor loop in Angular?

I am looking to iterate the user list with a condition. <li *ngFor="let user of users" *ngIf="user.age>25"> {{user.name}} </li> I understand that this code is incorrect. However, I would like to achieve something similar. Is there any way ...

angulartypescript

Ways to incorporate Bootstrap components into an Angular application without relying on external modules

I'm attempting to activate Bootstrap 5.3 Tooltips within my Angular 17 application. Within angular.json, I've added bootstrap.bundle.min.js, which includes PopperJS. "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle. ...

angulartypescriptbootstrap-5popper.js

No errors are being displayed with the React Hook Form using Zod and Material UI

Presenting my custom ProductInfoForm built using Material UI, react-hook-form with zod validations. However, I am encountering an issue: upon submitting the form, the data is displayed in the console as expected, but when intentionally triggering an error, ...

reactjstypescriptmaterial-uireact-hook-formzod

Angular Material's dialog modal swiftly closes without delay

Could you please explain why the modal opens and then closes instantly when I click on the Create Project button? https://example.com/edit/angular-code I am trying to display a component within the modal using Angular Material. portafolio.component.ts ...

angulartypescriptangular-material

Is it possible to extend the Object class in order to automatically initialize a property when it is being modified?

My experience with various programming languages leads me to believe that the answer is likely a resounding no, except for PHP which had some peculiar cases like $someArray['nonexistentKey']++. I'm interested in creating a sparse object whe ...

javascripttypescript

Serious issue: a dependency request is an expression (Warning from Angular CLI)

I am currently exploring the dynamic loading of lazy child routes within a lazy routing module. For example: const serverResponse = [ { path: "transaction", children: [ { path: "finance", modulePath: &qu ...

javascriptangulartypescriptangular-cliangular-cli-v8

React Router is used to render routes that do not match the specified path

I am utilizing TypeScript in React Router. I have defined two routes: / and /pages/id. class MyComponent extends React.Component { render() { return <BrowserRouter> <div> <Route exact path='/' ch ...

reactjstypescriptreact-routerreact-router-domreact-router-v4

Using useState to initialize a long value

Obtaining a very large state from JSON can be challenging, especially when it consists of at least 50 lines. During page generation, an error like "there is no such value" may occur if the initial value is not set and the interface is not assigned properl ...

javascriptreactjstypescriptuse-state

Utilizing environment variables in the root files of your SvelteKit project: A guide

I have encountered an issue with my SvelteKit project which uses TypeScript and includes a .env file at the root. Additionally, I have added a drizzle.config.ts file at the root directory. The problem arises when I try to import DATABASE_HOST from $env/sta ...

typescriptenvironment-variablessveltekit

Create a dynamic styled component with tags based on props

Looking to craft a dynamic tag using styled components, where the tag is passed in via props. Here's an example of the code: import * as React from 'react'; import styled from 'styled-components'; type ContainerProps = { chi ...

reactjstypescriptstyled-components

The child component is receiving null input data from the Angular async pipe, despite the fact that the data is not null in the

I encountered a strange scenario that I'm unable to navigate through and understand how it occurred. So, I created a parent component called SiteComponent. Below is the TypeScript logic: ngOnInit(): void { this.subs.push( this.route.data.subscribe( ...

angulartypescriptmat-tableasync-pipe