Skip to content

Latest commit

 

History

History
55 lines (33 loc) · 3.02 KB

Week_6.md

File metadata and controls

55 lines (33 loc) · 3.02 KB

Guidance

Answer the following questions considering the learning outcomes for this week. Make sure to record evidence of your processes. You can use code snippets, screenshots or any other material to support your answers.

Do not fill in the feedback section. The Founders and Coders team will update this with feedback on your progress.

Assessment

1. Show evidence of a learning outcome you have achieved this week.

Dynamic Routing with Next.js

You can change routes dynamically based on user interactions. Here's how it works based on the following snippets:

File Structure

The file structure is designed to enable dynamic routing based on file and folder names. Here's a breakdown of the key files and folders:

  • LISTINGS/page.js: This file represents the main listings page, displaying a list of items that we pass as props to the FilterAndDisplay component.
Screenshot Listing
  • COMPONENTS/FilterAndDisplay.jsx: Here we display these items using a mapping function. Each item gets wrapped into a Link component (line 31), which enables navigation to a dynamic route.
Screenshot Listing
<Link href={`/LISTING/${item.id}`}>
   {/* Your item display */}
</Link>
  • LISTING/[ID]/page.js: In this file we retrieve the dynamic parameter (extracted from the URL) params.id using React's props and we display that specific image
Screenshot Listing

2. Show an example of a learning outcome you have struggled with and/or would like to re-visit.

Hooks

Screenshot hooks

In this project I focused only on deployment unfortunately, so I didn' t contribute at all to the rest. Therefore hooks such as useContext, createContext and useReducer are still stranger to me

Feedback

Alphonso's feedback

What Went Well

That is a really detailed walk through of dynamic routes! The abstraction in Next means that dynamic routes can look a little like black magic, but you've stripped down their basic workings here pretty well.

Even Better If

You'd probably find it really useful to narrow down your focus a bit and start off by spiking useEffect() a bit. Hooks come in all shapes and there are always new custome ones being made but useEffect() gives you all the basic syntax and will force you to think of scope in a particular way. Once you've got that down you'll see that any hook is much the same tool but perfected for a dedicated use.