DEV Community

Cover image for Nested Dynamic Routes in React Router v6 🎯
Akram A. Abdelbasir
Akram A. Abdelbasir

Posted on • Updated on


Nested Dynamic Routes in React Router v6 🎯

When I first started to develop my portfolio, I fetched GitHub Repos and ran into the issue of needing to present the repo data when clicking on the repo name precisely as seen in the image below.

Nested Dynamic Routes in React Router v6 Gif image

If you look closely, you'll see that the URL is dynamically altered to reflect the chosen repository's name and the proper repo data is rendered. The term "dynamic routing" refers to this behavior.

I came up with this Sandbox demo example to help you better understand this type of behavior.

Latest comments (1)


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!