plugin-react-router

@putout/plugin-react-router

🐊Putout plugin adds ability to migrate to latest version of react router. Not bundled.

Install

npm i putout @putout/plugin-react-router -D

Rules

• ✅ declare;
• ✅ v6-convert-switch-to-routers;
• ✅ v6-convert-component-to-element;
• ✅ v7-split-multi-segment-route;
• ✅ v7-remove-useless-server;
• ✅ v8-apply-react-router-dom;

Config

{
    "rules": {
        "react-router/declare": "on",
        "react-router/v6-convert-switch-to-routers": "on",
        "react-router/v6-convert-component-to-element": "on",
        "react-router/v7-split-multi-segment-route": "on",
        "react-router/v7-remove-useless-server": "on",
        "react-router/v8-apply-react-router-dom": "on"
    },
    "plugins": ["react-router"]
}

declare

Check out in 🐊Putout Editor.

❌ Example of incorrect code

const routes = () => (
    <Switch>
        <Route exact path="/login" component={Login}/>
        <Route exact path="/join" component={Join}/>
    </Switch>
);

✅ Example of correct code

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

const routes = () => (
    <Routes>
        <Route exact path="/login" component={Login}/>
        <Route exact path="/join" component={Join}/>
    </Routes>
);

v6-convert-switch-to-routes

ReactRouter v6 uses Routers instead of Switch. Check out in 🐊Putout Editor.

❌ Example of incorrect code

const {Route, Switch} = require('react-router');

const routes = () => (
    <Switch>
        <Route exact path="/login" component={Login}/>
        <Route exact path="/join" component={Join}/>
    </Switch>
);

✅ Example of correct code

const {Route, Routes} = require('react-router');

const routes = () => (
    <Routes>
        <Route exact path="/login" component={Login}/>
        <Route exact path="/join" component={Join}/>
    </Routes>
);

v6-convert-component-to-element

ReactRouter v6 uses element instead of component. Check out in 🐊Putout Editor.

❌ Example of incorrect code

<Route path="/" component={Home}/>;

✅ Example of correct code

<Route path="/" element={<Home/>}/>;

v7-split-multi-segment-route

Split any multi-segment splat <Route> into a parent route with the path and a child route with the splat.

(c) reactrouter.com

Checkout in 🐊Putout Editor:

• ✅ jsx;
• ✅ object;

❌ Example of incorrect code

<Routes>
    <Route path="/" element={<Home/>}/>
    <Route path="dashboard/*" element={<Dashboard/>}/>
</Routes>;

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

✅ Example of correct code

<Routes>
    <Route path="/" element={<Home/>}/>
    <Route path="dashboard">
        <Route path="*" element={<Dashboard/>}/>
    </Route>
</Routes>;

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

v7-remove-useless-server

Checkout in 🐊Putout Editor.

❌ Example of incorrect code

import {StaticRouter} from 'react-router-dom/server';

✅ Example of correct code

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

v8-apply-react-router-dom

In v7, we collapsed the DOM APIs into react-router/dom, but to ease the v6->v7 upgrade we continued re-exporting everything through react-router-dom. We have now dropped react-router-dom, so if you didn't get around to swapping your imports in v7, you will need to swap them to react-router and react-router/dom for v8.

(c) reactrouter.com

Checkout in 🐊Putout Editor.

❌ Example of incorrect code

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

✅ Example of correct code

import {Link} from 'react-router/dom';

License

MIT