# react-router-dom-5-to-6

> codemod cli for react-router-dom v6 upgrade ⚒️

Latest version **0.0.2** (published 2023-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-router-dom-5-to-6
pnpm add react-router-dom-5-to-6
yarn add react-router-dom-5-to-6
bun add react-router-dom-5-to-6
```

Provides the command `react-router-dom-5-to-6`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-08-10 |
| First published | 2023-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 30.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | SyMind |
| Maintainers | symind |

## Links

- npm: https://www.npmjs.com/package/react-router-dom-5-to-6
- Repository: https://github.com/SyMind/react-router-dom-5-to-6
- Homepage: https://github.com/SyMind/react-router-dom-5-to-6#readme
- Issues: https://github.com/SyMind/react-router-dom-5-to-6/issues
- npm.io page: https://npm.io/package/react-router-dom-5-to-6

## Dependencies (10)

- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [execa](https://npm.io/package/execa.md) ^5.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [semver](https://npm.io/package/semver.md) ^7.5.1
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.1.0
- [@antfu/ni](https://npm.io/package/@antfu/ni.md) ^0.21.3
- [jscodeshift](https://npm.io/package/jscodeshift.md) ^0.11.0
- [is-git-clean](https://npm.io/package/is-git-clean.md) ^1.1.0
- [update-check](https://npm.io/package/update-check.md) ^1.5.3
- [yargs-parser](https://npm.io/package/yargs-parser.md) ^20.2.6

## Recent versions

- 0.0.2 (latest) — 2023-08-10
- 0.0.1 — 2023-05-15

## README

# React Router DOM 5 to 6

A collection of codemod scripts that help direct upgrade React Router DOM 6 using [jscodeshift](https://github.com/facebook/jscodeshift). Inspired by [Ant Design v5 Codemod](https://github.com/ant-design/codemod-v5).

## Usage

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

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

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

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

## Compared with [react-router-v6-codemods](https://github.com/rajasegar/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.

```diff
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.

```diff
-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.

```diff
-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.

```diff
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

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

#### `replace-redirect-to-navigate`

Replace `<Redirect>` component with `<Navigate>` component.

```diff
-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`.

```diff
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.

```diff
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.

```diff
- 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

---
_Source: https://npm.io/package/react-router-dom-5-to-6 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._