React Router/7/Route Wildcard To Nested

Last update

Dec 17, 2024

This transformation updates the routing structure for multi-segment splat paths. It affects both createBrowserRouter configurations and components.

Before

createBrowserRouter([
  { path: '/', element: < Home / > },
  {
    path: 'dashboard/*',
    element: < Dashboard / > ,
  },
]);

After

createBrowserRouter([
  { path: '/', element: < Home / > },
  {
    path: 'dashboard',
    children: [{
      path: '*',
      element: < Dashboard / > ,
    }, ],
  },
]);

This transformation updates the routing structure for multi-segment splat paths. It affects both createBrowserRouter configurations and components.

Before

createBrowserRouter([
  { path: '/', element: < Home / > },
  {
    path: 'dashboard/*',
    element: < Dashboard / > ,
  },
]);

After

createBrowserRouter([
  { path: '/', element: < Home / > },
  {
    path: 'dashboard',
    children: [{
      path: '*',
      element: < Dashboard / > ,
    }, ],
  },
]);

Build custom codemods

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

Get Started Now