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?

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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store