React Router/6/Update Relative Links

1.0.0Last update Nov 4, 2024
by@manishjha-04

This codemod modernizes Route and Link components in React Router by:

  1. Removing the deprecated exact prop from Route.
  2. Updating Route to use the element prop.
  3. Rewriting dynamic Link and Route 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

background illustrationGet Started Now