Photo by Gabe Hobbs on Unsplash


Dynamic Page And Route Generation

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

Onur Dayıbaşı
Frontend Development With JS
2 min readSep 23, 2021

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.

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