Photo by Gabe Hobbs on Unsplash

ROUTING (REACT-ROUTER)

Dynamic Page And Route Generation

What means Dynamic Page and Route? Why do we need a new page and routing on the fly?

Online content generation tools like Font, Color, Theme, Paint, Note, or Drawing editors provide users to create their content and share it with other people. To make some content group in a page, you must give users to generate their page on the fly and save data to the server.

To try this capability, I develop a sample application. The user can generate a new page and define its route on the fly in the application. Users can also delete or clear all pages. I have not added the saving part yet. But it displays how to generate paths and pages.

• https://onurdayibasi.dev/dynamic-route

https://onurdayibasi.dev/dynamic-route

Two points are essential to developing dynamic pages;

• First Point: Define routes under related pages. For example, the Main app does not know nested page generation. To make this, we get ReactRouter match props and use them to define parametric routes

Define Parametric Routes

• Second Point: Define the nested paths without exact => exact={false} to render also parent page, and it provides dynamic routings.

Define Parent Routing with exact=false

Let’s continue reading 😃

You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share