Cookies planet delivery service website with 4 components : Home
,Features
,FeatureDetails
and About
.
The student should learn how to turn the 4 components into pages and route and navigate between them.
- Installing react-router react-router-dom
npm install react-router-dom
- in index.js wrap App with BrowserRouter
import { BrowserRouter } from "react-router-dom";
- In App .js Wrap each component with Route and add its path >> test not working
import { Route } from "react-router-dom";
import { Route, Routes } from "react-router";
inApp.js
- wrap all routes in
<Routes>
- add exact to each path
<Route exact path="/PATH" element={<Component />}>
- rule of thumb longest paths first
- create a nav bar
- go to navbar add links to "/" and "/featuers" link
import { Link } from "react-router-dom";
<Link to="PATH"> <COMPONENT /> </Link>
- go to feature item add a link above center to="/features/homemade"
- in app.js add a route for details
feature/homemade
, then tofeaturs/:featureId
- in featureItem.js change path to
${features/${feature.id}
import { Navigate, useParams } from 'react-router-dom';
- in detail component
const featureId = useParams().featureId;
- find feature
const feature = props.features.find( (feature) => feature.id === featureId);
- redirect to home if not found
- switch to slugs