React Router/6/Update Relative Links
This codemod modernizes Route
and Link
components in React Router by:
- Removing the deprecated
exact
prop fromRoute
. - Updating
Route
to use theelement
prop. - Rewriting dynamic
Link
andRoute
paths 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