React router v6 changes

Photo by Lautaro Andreani on Unsplash

Install the latest version of React v17 and react-router-dom v6

npm install react-router-dom@latest

Or yarn add react-router-dom@latest

1. No <Switch> anymore. Nested routes

import <Routes> from ‘react-router-dom’ and around the <Route>

<Routes>
<Route.../>
<Route.../>
</Routes>

All Route in the hug of mommy <Routes>, no other tags

2. component to element

<Route path='/' element='<HomePage/>' />

the page is no longer in {…}

3.no exact

don’t need to add ‘exact’ to the Route to direct the page

<Route exact path='/' element='<Page/>' />

delete the exact kind of transfer to index

an index route at any level of the route hierarchy that will render when the parent matches but none of its other children do.

<Route index element={<Home />} />

4.Use :style syntax in your route path and useParams()

<Routes>
      <Route
        path="invoices/:invoiceId"
        element={<Invoice />}
      />
</Routes>