This codemod modernizes Route and Link components in React Router by:
- Removing the deprecated
exactprop fromRoute. - Updating
Routeto use theelementprop. - Rewriting dynamic
LinkandRoutepaths that use template literals like${match.url}and${match.path}.
Before
<Route exact path="/home"><HomePage /></Route><Link to={`${match.url}/details`}>Details</Link><Route path={`${match.path}/details`}><DetailsPage /></Route>
After
<Route path="/home" element={<HomePage />} /><Link to="/details">Details</Link><Route path="/details" element={<DetailsPage />} />
This ensures your code is compatible with newer versions of React Router, which no longer use exact and prefer the element prop for components. It also simplifies dynamic path generation by removing match references.
Build custom codemods
Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community