We'll be diving into react-router-dom and harnessing the useParams() hook.
Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
The below command is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
npm i && code . && npm run dev
You'll be working with a songs.json file, which contains a "songs" key. This key holds an array of the Rolling Stones' 500 best songs. Each song object has details like rank, title, artist, album, and year.
- Fetch and display song titles on the homepage.
- Use the song's title as a key to create dynamic routes. For instance, if a song's title is "Imagine", the route should be /song/imagine.
- When a song title is clicked, it should route to a dynamic page displaying all the song's details.
Always use the song's title key to generate the dynamic route for each song's detailed view.
Pay close attention to how data is passed between components and how dynamic routes are set up and utilized. Understanding the flow of data and the structure of routes will be key to successfully completing the exercise.
Lets take a look at the following components.
- This file sets up the main structure of the application.
- It uses the
BrowserRouter
fromreact-router-dom
to enable routing within the app. - The
nav
section contains links to navigate through the app. Currently, there's a link to the home page. - The
Routes
component is used to render the routes defined in theroutes.jsx
file.
- This component displays a list of the "Rolling Stones 500 Greatest Songs of all Time".
- Songs data is imported from a JSON file and is mapped to display each song with a link.
- The link for each song is dynamically generated based on the song's title. This will be crucial when setting up dynamic routes.
- This component is responsible for displaying detailed information about a specific song.
- It uses the
useParams
hook fromreact-router-dom
to fetch the song title from the URL. - Based on the song title from the URL, it finds the corresponding song from the imported JSON data.
- If the song is found, it displays its title, artist, album, and year. If not, it displays a "Song not found!" message.
- This file defines the routes for the application.
- There's a default route that points to the
Home
component. - A dynamic route is set up for individual songs using the
:songTitle
parameter. This route renders theSongInfo
component.