SyMind/react-router-dom-5-to-6

codemod cli for react-router-dom v6 direct upgrade, not progressive ⚒️

React Router DOM 5 to 6

A collection of codemod scripts that help direct upgrade React Router DOM 6 using jscodeshift. Inspired by Ant Design v5 Codemod.

Usage

Before run codemod scripts, you'd better make sure to commit your local git changes firstly.

npx react-router-dom-5-to-6 src

If you want to use a specific codemod script, you can use the following command.

npx react-router-dom-5-to-6 src --transform=<codemod-script-name>

Compared with react-router-v6-codemods

react-router-v6-codemods script adopts a progressive upgrade scheme using react-router-dom-v5-compat, and will be in the v5 version for a long time.

This script adopts a direct upgrade scheme, in order to quickly try out the new features of the v6 version and analyze their impact on the performance of the target project, such as LCP indicators.

Codemod scripts introduction

change-match-path-args-order

Upgrade parameters order of the matchPath method.

import { matchPath } from 'react-router-dom';

const match = matchPath(
- '/users/123',
  {
    path: '/users/:id',
    exact: true, // Optional, defaults to false
    strict: false, // Optional, defaults to false
  },
+ '/users/123',
);

compat-function-and-type

Compatible with the withRouter and useHistory methods in v5.

-import { withRouter, useHistory } from 'react-router-dom';
+import { withRouter, useHistory } from 'react-router-dom-5-to-6-compat';

compat-nav-link-active-prop

Compatible with the activeClassName and activeStyle properties of <NavLink> component.

-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router-dom-5-to-6-compat';

export function Foo() {
  return <NavLink activeClassName="active" />;
}

rename-nav-link-prop

Upgrade the property name of the <NavLink> component.

import { NavLink } from 'react-router-dom';

export function App() {
- return <NavLink exact />;
+ return <NavLink end />;
}

repalce-react-router-with-react-router-dom

Replace react-router with react-router-dom.

```diff
-import { useHistory } from 'react-router';
+import { useHistory } from 'react-router-dom';

replace-redirect-to-navigate

Replace <Redirect> component with <Navigate> component.

-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';

export function App() {
  return (
    <div>
-     <Redirect to="about" />
+     <Navigate to="about" replace />
-     <Redirect to="home" push />
+     <Navigate to="home" />
    </div>
  );
}

replace-use-route-match-with-use-match

Replace useRouteMatch method with useMatch.

import { useRouteMatch } from 'react-router-dom';

export function App() {
- useRouteMatch({ strict: true });
+ useMatch({ end: true });
- useRouteMatch({ sensitive: true });
+ useMatch({ caseSensitive: true });

  return null;
}

route-prop-migration

Migrate the properties of <Route> component.

import { Route } from 'react-router-dom';
import { App } from './app';

export function Foo() {
- return <Route exact path="users" component={App} />;
+ return <Route path="users" component={<App />} />;
}

upgrade-switch-to-routes

Upgrade <Switch> component to <Routes> component.

- import { Switch, Route } from 'react-router-dom';
+ import { Routes, Route } from 'react-router-dom';

export function App() {
  return (
-   <Switch>
+   <Routes>
      <Route path="/project/:id" component={Project} />
-   </Switch>
+   </Routes>
  );
}

License

MIT