React Router/7/Add V7 RelativeSplatPath Flag

/icons/calendar.svg

Last update

Dec 17, 2024

This transformation adds the necessary configuration to enable v7 features, specifically the v7_relativeSplatPath flag. It affects both components and createBrowserRouter configurations.

Before

<BrowserRouter>
{/* Routes */}
</BrowserRouter>

After

<BrowserRouter
future={{
v7_relativeSplatPath: true,
}}
>
{/* Routes */}
</BrowserRouter>

Before

const router = createBrowserRouter(routes);

After

const router = createBrowserRouter(routes, {
future: {
v7_relativeSplatPath: true,
},
});

This change adds the future option with the v7_relativeSplatPath flag set to true. This enables the new behavior for relative path matching and linking for multi-segment splat paths in React Router v7.

Build custom codemods

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

background illustrationGet Started Now