ReactJS Modals and Dialogs using routes
Apr 25 2021 | 1 Min Read
When you think about handling modals in React, you probably think about handling them in the state. That's what the majority of the devs are doing. You usually use state from
React.useState to control them.
As our title describes, let's handle those modals through routes. When you are route
/create-user, The create modal will open, and if you are on route
/user/12/edit The edit modal will be opened. We will render those modals in the same user's page, But the prop will change, If you are on the edit page, The edit prop will pass true and the same goes for create user page.
Now, let's setup routes
On lines 37, 40, and 43. You will observe we have used the same component for showing users but changed props that show modals.
Complete demo and code at https://codesandbox.io/s/wandering-fog-5wc22. If you open the complete demo, you will observe how the URL changes when you open or close the modals.