React Router/6/Remove ActiveStyleprops

/icons/calendar.svg

Last update

Nov 4, 2024

This codemod updates NavLink components that use separate style and activeStyle props to the modern isActive function in react-router-dom. It simplifies the logic by combining the two props into a single style prop with conditional styling.

Before

<NavLink to="/home" style={{ color: 'blue' }} activeStyle={{ color: 'red' }}>
Home
</NavLink>

After

<NavLink to="/home" style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}>
Home
</NavLink>

This makes the component more concise and aligns it with the newer API for conditional styles based on the isActive property.

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

background illustrationGet Started Now