React js pwa tutorial #4 add routing in progressive web app

in this video, we will learn how to set up a project for progressive web app | PWA and install another package such as react-bootstrap and bootstrap, etc . this PWA with react js video made by anil Sidhu in english anil Sidhu

step for video
create a project with create-react-app
understand structure
install react-bootstrap
checkout api

Checkout and subscribe our new channel for technical news

[codestepbystep]

Checkout and subscribe our new channel for technical news

[ヴァルガスアルド]

<Switch> Is no more available on react-router-dom, so it is necessary to use Routes instead. By the way, the <Route> also changes, instead of "component" you need to pass your component as an element as follows: <Route path="/about" element={About />}><Route> for this example to work.

[stevereid]

Nav.Link and Link generate <a> tags, so your nesting an <a> tag within an <a> tag. React will complain about this for good reason unless you use the Nav.Link 'as' prop for the Link

[thiagobarbosadeoliveira]

it worked for me

import { Link, Route, BrowserRouter as Router, Routes } from 'react-router-dom';

....
<div className="App">
<Router>
<Navbar bg="primary" variant="dark">
<Navbar.Brand
<Nav className="me-auto">
<Link to="/"
<Link to="/about"
<Link to="/users"
</Nav>
</Navbar>
<Routes>
<Route path="/about" element={<About/>}></Route>
<Route path="/users" element={<Users/>}></Route>
<Route path="/" element={<Home/>}></Route>
</Routes>
</Router>
</div>