@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

• ✅ v6-convert-switch-to-routers;
• ✅ v6-convert-component-to-element;
• ✅ v7-split-multi-segment-route;

Config

{
    "rules": {
        "react-router/v6-convert-switch-to-routers": "on",
        "react-router/v6-convert-component-to-element": "on",
        "react-router/v7-split-multi-segment-route": "on"
    },
    "plugins": ["react-router"]
}

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>
);

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/>,
    }],
}]);

License

MIT