Attempted import error: 'Switch' is not exported from 'react-router-dom'

[sayinmehmet47]

After downloding , "react-router-dom": "^6.0.0-beta.8", Switch is not available anymore. So my this code fire error.

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

import routes from "./routes";

const RouterProvider = () => (
  <BrowserRouter>
    <Routes>
      <AnimatedSwitch
        atEnter={{ opacity: 0 }}
        atLeave={{ opacity: 0 }}
        atActive={{ opacity: 1 }}
        className="switch-wrapper"
      >
        {routes.map((route) => (
          <Route key={route.path} path={route.path} element={route.component} />
        ))}
      </AnimatedSwitch>
    </Routes>
  </BrowserRouter>
);

export default RouterProvider;

My error is **./node_modules/react-router-transition/lib/index.js
Attempted import error: 'Switch' is not exported from 'react-router-dom'.
**
is there any way to fix it?

[maisano]

I haven't published any updates to this package in quite a while–after a quick look at the React Router migration guide, it appears that Switch is no longer an exported symbol of the package, and has been replaced with the Routes component.

I don't currently have any plans to upgrade this package to account for the v6 changes, but might have some time to update it in the coming weeks. In the interim, if you're looking to be unblocked, I might recommend "forking" this package locally–the entire library is a tiny bit of glue code (~200 lines) stitching together react-router and react-motion. It's contained in a single module and should be easy enough to copy-paste as a module in your project, making the API adjustments accordingly.

I would happily review and accept a PR that updates the import from Switch to Routes, taking care to adjust the usage as necessary. Otherwise, I can try to get to this sometime soon, publishing a new major version that only works with react-router@6.

[sayinmehmet47]

@maisano I updated my whole components routing and made the transition with react-transition-group. Thanks for library advice also. For other who want to check how I did it, I want to add my repo link.

https://github.com/sayinmehmet47/currency-portfolio