In this lab, you'll be utilizing React Router to create a multi page app. Two json files have been provided for you in the src/data
folder. React Router
has been installed in this project for you. This lab was built with functional components.
fork
andclone
this repositorycd
into the repo directorynpm i
ornpm install
to install our dependenciesnpm start
to spin up our app
- You must have a page to display when your app loads. The
url
for this component should be/
. - You must have a page to display all games. The
url
for this component should begames
. - You must have a page to display all genres. The
url
for this component should begenres
. - You must have a page to display the details about a game. The
url
for this component should begames/:game_id
. - Your app must be styled
-
Set up your
BrowserRouter
in theindex.js
file. -
Create a
Home
component. This component can display anything you'd like. -
Create a
Games
component. Load yourgames.json
file into this component. UseuseEffect
anduseState
to set the items inside ofgames.json
to state. Map through your games in state and display them on the page. -
Create a
Genres
component. Import thegenres.json
file into this component. UtilizeuseEffect
anduseState
to set the list of genres to state. -
Create a
GameDetails
component that has a more detailed view of a game. You'll want to capture theid
in the url bar. Set up some state for this component that looks like the following:const [gameId, setGameId] = useState('') // should be the id in the url bar, const [game, setGame] = useState(null) // Should be null to start and later becomes an object with the selected game.
- You'll want to access get the
id
from React Router'suseParams
hook. - Add a
useEffect
to this component. You should use ahigher order array method
to find a movie where the id matches what is in state. You may need to parse the id into an integer. - Display the selected movie in this component.
- You'll want to access get the
-
In
App.js
:- Import the provided
Nav
component and add it to yourApp.js
. This component should be used before any routes. NOTE: This component will not work until after you've set upBrowserRouter
in theindex.js
file. - Set up a
<Routes/>
for your routes. - Add in the routes for each page according to the requirements above.
- Don't forget to import
Routes
andRoute
:import { Routes, Route } from 'react-router-dom'
- Import the provided
-
Style your app! Create a
css
file in thestyles
folder.