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

When doing routing, we can’t go forward with the Switch mentioned. react-router-dom updated its syntax, I already opened a PR to fix this, please check #1386.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 2
  • Comments: 21 (2 by maintainers)

Most upvoted comments

Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’.

Replace “Switch” with “Routes”

import {BrowserRouter, Route, Switch,NavLink} from 'react-router-dom';
TO
import {BrowserRouter, Route, Routes ,NavLink} from 'react-router-dom';

<Switch>
        <Route path='/home' component={Home}/>
TO
<Routes>
        <Route path='/home' element={Home}/>

I found this on stackoverflow. Hope this would help you

https://stackoverflow.com/a/69849271/11026123

@AMEENANAS yes, I already know that, that’s why I already opened a PR to fix it. Check #1386. Thx.

Routes Not working also

as @kstoev9316 said but remember in the element you need to add </>

element={<Home/>}

Hi, Solution is to install Switch by entering: npm install react-router-dom@5

Please stop posting on this issue, I only left it open until we’re sure the whole documentation is updated.

For fixing this, just check it here https://stackoverflow.com/a/69849271/842768 and its comments if needed.

Thank you for your understanding!

import { Switch, Route } from “react-router-dom”; to

import { Routes ,Route } from ‘react-router-dom’; You also need to update the Route declaration from

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

<Route path=‘/welcome’ element={<Home/>} />

Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’.

import { BrowserRouter as Router, Routes, Route } from ‘react-router-dom’ import SigninPage from ‘./pages/signin’ import Home from ‘./pages’

function App() { return ( <Router> <Routes> <Route path=‘/’ element={<Home />} /> <Route path=‘/signin’ element={<SigninPage />} /> </Routes> </Router> ) }

Find example from the docs https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes

this is bcz react-router-dom @6 was install in npm , so uninstall react-router-dom from npm type in terminal - npm uninstall react-router-dom after that type in terminal - npm install react-router-dom@5.3.0 and Switch will work

Thank you

Hello, I️ came across this thread because I️ was working on an individual project and it seems like this has been answered. However, I️ haven’t seen anyone link to the react-router docs with a full explanation yet. I️ hope this is helpful as well. Here’s a link.

you can run:

npm install --save react-router-dom@5.2.0

I would forget about react router v6.x .

It installs v5.x in the @types .

It just smells broken. Stick to v5.x

@danny-votez thanks man you saved me from calling