xxxxxxxxxx
<Route path='/welcome' element={<Home/>} />
xxxxxxxxxx
replace your code with
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
xxxxxxxxxx
react-router-dom v6 example: //NO SWITCH IN V6
import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import '../styles/global.css'
import Layout from '../containers/Layout'
import Home from '../pages/Home'
import Login from '../containers/Login'
import RecoveryPassword from '../containers/RecoveryPassword'
import NotFound from '../pages/NotFound'
const App = () => {
return (
<Router>
<Layout>
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/login" element={<Login/>}/>
<Route exact path="/recovery-password" element={<RecoveryPassword/>}/>
<Route path="*" element={<NotFound/>}/>
</Routes>
</Layout>
</Router>
);
}
export default App;
xxxxxxxxxx
//CHANGE:
import { Switch, Route } from "react-router-dom";
//to
import { Routes ,Route } from 'react-router-dom';
//CHANGE:
<Route path="/" component={Home} />
//to
<Route path='/welcome' element={<Home/>} />
xxxxxxxxxx
uninstal react-router-dom
npm uninstall react-router-dom
//and install old version it will resolve the error
npm install react-router-dom@5.2.0
xxxxxxxxxx
//uninstall the version 6 of react-router-dom
npm uninstall react-router-dom
//And installed version 5.2.0 of react-router-dom
npm install react-router-dom@5.2.0
//or use the v6 code
//This is an example using react-router-dom V6
import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import '../styles/global.css'
import Layout from '../containers/Layout'
import Home from '../pages/Home'
import Login from '../containers/Login'
import RecoveryPassword from '../containers/RecoveryPassword'
import NotFound from '../pages/NotFound'
const App = () => {
return (
<Router>
<Layout>
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/login" element={<Login/>}/>
<Route exact path="/recovery-password" element={<RecoveryPassword/>}/>
<Route path="*" element={<NotFound/>}/>
</Routes>
</Layout>
</Router>
);
}
xxxxxxxxxx
Here Just Install Switch.
And then you can use Switch.
Switch is replaced in react-router-dom version 6.
So that you need to install react-router-dom version 5.
Now, your error should be solved.
Run the command below in your terminal
npm install react-router-dom@5
xxxxxxxxxx
import { BrowserRouter as Router, Routes , Route } from 'react-router-dom';
<Router>
<div>
<Navbar totalItems = {cart.total_items}/>
<Routes>
<Route path='/' element={<Products products = {products} onAddToCart = {handleAddToCart}/>} />
<Route path='/cart' element={<Cart cart={cart} />} />
</Routes>
</div>
</Router>
xxxxxxxxxx
In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
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} />