So i was trying react for first time, i followed the documentation and at router dom i got stuck When i use Switch is says "export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'" So in short my router isn't working and i want a way to make it work, also it is the latest version of react as i just made this project yesterday
import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import Form from './components/Form';
import Sus from './components/Sus';
import React from "react";
import {
BrowserRouter as Router,
// Switch,
Routes,
Route,
Link
} from "react-router-dom";
function App() {
return (
<Router>
<div className="">
<Navbar title="Sus" main="SusHome" about="SusAbout"/>
<div className="container my-5">
<Routes>
<Route path="/" component={Form}/>
<Route path="/sus" component={Sus} />
</Routes>
</div>
</div>
</Router>
);
}
export default App;
Upgrading React Router V5 to V6
If you have ever used React Router you know that we need to wrap our routes into this <Switch> component that makes sure that only one of these routes is loaded at the same time, instead of all matching routes. Something like this
export function App() {
return (
<div>
<Switch>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
)
}
Now with V6 we changed the name from Switch to Routes and now the Routes component has a new prop called element, where you pass the component it needs to render inside this component and be like this
export function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
)
}