I've been trying to create links for different pages Using react-router-dom, I imported BrowserRouter, Route and Switch but I kept getting an error that "Switch is not exported from 'react-router-dom'. Same switch that I used a couple of days back on a project and it worked o, I read react documentation and checked online including quora and reddit and observed that a lot of people were having same issue.

Since my react-router is version 6.0 I changed Switch to Routes and components to elements then removed exact, this time it threw an Invalid Hook call error, I followed the instructions on react docs and found out that I have more than one copy of react in the same app.

I don't know how to proceed from here and I have a deadline to meet. I've been stuck at this for over a day now with no solution in sight, I couldn't even sleep all night. I even created a new react app, yet the same issue.
I don't know if the problem is from my code.

Trasezengatu( this name na tongue twister)
qtguru
karleb

Please make una come help me.

Tesan is coming. I don't know react o.

How can you have different versions of react on same app? I'm curios.

You said others have same issues online, what was their solutions?

Onahi95:
I've been trying to create links for different pages Using react-router-dom, I imported BrowserRouter, Route and Switch but I kept getting an error that "Switch is not exported from 'react-router-dom'. Same switch that I used a couple of days back on a project and it worked o, I read react documentation and checked online including quora and reddit and observed that a lot of people were having same issue.

Since my react-router is version 6.0 I changed Switch to Routes and components to elements then removed exact, this time it threw an Invalid Hook call error, I followed the instructions on react docs and found out that I have more than one copy of react in the same app.

I don't know how to proceed from here and I have a deadline to meet. I've been stuck at this for over a day now with no solution in sight, I couldn't even sleep all night. I even created a new react app, yet the same issue.
I don't know if the problem is from my code.

Trasezengatu( this name na tongue twister)
qtguru
karleb

Please make una come help me.

Did you confirm that the library was installed in node_modules

Check your package.json and remove the extra react dependency, delete node_modules and package-lock.json or yarn.lock and refetch dependencies.

You can either use the most recent react-router and follow their latest docs https://reactrouter.com/docs/en/v6/getting-started/installation or specifically use the version of react-router you're familiar with, that's why we have package managers, you are not forced to use the latest package.

Note: react-router V6 is not backward compatible with previous versions.

There's a new version of React router Dom that has some notable changes which are not compatible with old code. You may want to check it out.

qtguru:

Did you confirm that the library was installed in node_modules

Yes it is

spartan117:
There's a new version of React router Dom that has some notable changes which are not compatible with old code. You may want to check it out.

I'm using the latest model version 6.0 reason the Switch didn't work since it was no longer supported by the new version.

valzey:
Check your package.json and remove the extra react dependency, delete node_modules and package-lock.json or yarn.lock and refetch dependencies.

You can either use the most recent react-router and follow their latest docs https://reactrouter.com/docs/en/v6/getting-started/installation or specifically use the version of react-router you're familiar with, that's why we have package managers, you are not forced to use the latest package.

Note: react-router V6 is not backward compatible with previous versions.

Thanks I will try it out, though I'm seeing just one react dependency in my package. jason file.

Karleb:
Tesan is coming. I don't know react o.
How can you have different versions of react on same app? I'm curios.
You said others have same issues online, what was their solutions?

It worked once Switch is changed to Routes

Onahi95:

I'm using the latest model version 6.0 reason the Switch didn't work since it was no longer supported by the new version.

Yes you need to update your codebase to reflect the changes made in the new version. Read through the docs

Onahi95:

It worked once Switch is changed to Routes

Nice

spartan117:

Yes you need to update your codebase to reflect the changes made in the new version. Read through the docs


Nice

It hasn't worked yet o, I was only telling him what happens when the Switch is changed to Routes, mine didn't work

Onahi95:

It hasn't worked yet o, I was only telling him what happens when the Switch is changed to Routes, mine didn't work

import {Routes, Route} from "react-router-dom"
use this way
<Routes>
<Route path="/" element={<Home />} />
</Routes>

QuantumR:
import {Routes, Route} from "react-router-dom"
use this way
<Routes>
<Route path="/" element={<Home />} />
</Routes>

I've done that already yet it throws the invalid hooks call

Onahi95:

I've done that already yet it throws the invalid hooks call

share screenshot of the actual error screen, the issue is probably not related to react router dom

switch is no longer supported in react router

React latest version no more support switch.

src-
app.js

import React from react;
import Navbar from './component/Navbar;
import footer from './component/footer;
import Home from './pages/Home;
import About from './pages/About;
import {Route,Routes} from 'react-router-dom';
Const App=()=>{
return (
<div>
<Navbar/>
<Routes>
<route path='/' element={<Home/>}/>
<route path='/About' element={<About>/}/>
<route path='/Contact' element={<Contact/>}/>
</Routes>
<footer/>
</div>
);
}
export default App;

Use Routes, instead of Switch, Switch is no longer supported

Frontend:
switch is no longer supported in react router

React latest version no more support switch.

src-
app.js

import React from react;
import Navbar from './component/Navbar;
import footer from './component/footer;
import Home from './pages/Home;
import About from './pages/About;
import {Route,Routes} from 'react-router-dom';
Const App=()=>{
return (
<div>
<Navbar/>
<Routes>
<route path='/' element={<Home/>}/>
<route path='/About' element={<About>/}/>
<route path='/Contact' element={<Contact/>}/>
</Routes>
<footer/>
</div>
);
}
export default App;

Already tried according to the write up

olukunle50:
Use Routes, instead of Switch, Switch is no longer supported

.

React navigation suck. Angular router the best

Csami:
React navigation suck. Angular router the best

Pele oh

olukunle50:
Use Routes, instead of Switch, Switch is no longer supported

I only just found this out recently, Even useHistory self is no longer supported

Bro share your code via github make we help out.

Use Nextjs if you can.