React Router/6/Switch To Routes

Last update

Nov 4, 2024

This codemod updates Switch components to Routes in React Router, in line with React Router v6 and newer. It also adjusts the imports, replacing Switch with Routes in react-router-dom import statements.

Before

import { BrowserRouter, Route, Switch } from "react-router-dom";

<Switch>
  <Route path="/home" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
</Switch>

After

import { BrowserRouter, Route, Routes } from "react-router-dom";

<Routes>
  <Route path="/home" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
</Routes>

This codemod modernizes routing logic by using Routes instead of Switch, aligning your code with the latest practices in React Router.

Before

import { BrowserRouter, Route, Switch } from "react-router-dom";

<Switch>
  <Route path="/home" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
</Switch>

After

import { BrowserRouter, Route, Routes } from "react-router-dom";

<Routes>
  <Route path="/home" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
</Routes>

This codemod modernizes routing logic by using Routes instead of Switch, aligning your code with the latest practices in React Router.

Build custom codemods

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

Get Started Now