- fork and clone this repository
- Install
react-router-dom
to your react app.
npm install react-router-dom
-
In
index.js
importBrowserRouter
fromreact-router-dom
and wrapApp
withBrowserRouter
. -
Import
Route
andRoutes
fromreact-router-dom
. -
In
App.js
Wrap each component withRoute
and add itspath
. -
Wrap all your routes in
Routes
.
-
In
Nav.js
importNavLink
fromreact-router-dom
. -
Replace
<a>
tags with<NavLink>
tags from react router dom and replacehref
withto
so thatHome
shows you theHome.js
component andTrips
takes you toTripsList
component. -
Add a style that if the page is active the link becomes underlined.
- In
TripItem.js
import<Link>
again and wrap your wholediv
with it so it takes you totripDetail
component. - in
app.js
details route/details
, add a route param calledtripId
. - Back to
TripItem.js
change the link to thetripDetail
page to include thetripId
. - In
TripDetail.js
importuseParams
fromreact-router-dom
. - Extract the
tripId
coming from the url and store it in a variable calledtripId
. - Find the correct trip from the trips data file.
- Import
Navigate
fromreact-router-dom
and if the trip isn't found redirect the user to the home page. - Switch from using ids to using slugs.
- You have 3 buttons: easy, moderate and hard. when a button is clicked, filter the trips according to difficulty by changing the url, for example http://www.localhost:8000/trips?difficulty=easy Hint: useSearchParams