Currently, the overview about the Lord of the Rings volumes is done with static routing. You are going to refactor the code with dynamic routes as well as links. Finally, you will create a button to navigate to a random volume.
Refactor the static routes of the volume detail pages so that they use dynamic routes instead.
You can use the following hints as guideline:
- Create a
[slug].jsfile in thevolumesfolder. This file will eventually replace the static volume detail pages. - Inside of
[slug].jsrecreate theVolumeDetailcomponent which returns the same elements as the static version of the component. Adjust the code so that the content is now based around theslugfrom therouter.queryobject.
Refactor the volumes overview and create the links dynamically from the volumes array.
On the volume overview page, create a button to navigate to a random volume.
This function will help you to get a random element from an array:
function getRandomElement(array) {
return array[Math.floor(Math.random() * array.length)];
}💡 You will need to use
router.push()in the event handler function.
To work locally, please install the dependencies using npm i first.
Run npm run dev to start a development server and open the displayed URL in a browser.
Use npm run test to run the tests.
Select the "Preview: 3000" tab to view this project.
Select the "Tests: logs" tab to view the tests.
The
npm run devandnpm run testscripts run automatically.
You can use the following commands:
npm run devto start a development servernpm run buildto build the projectnpm run startto start a production servernpm run testto run the testsnpm run lintto run the linter