mike-minchenko / react-router-dom-tricks

Small triccs with react-router-dom

Demo of React Router Tricks (Link)

Responsive Routes:

• EN video
• RU video
• whole src
• responsive routes source
• device detector source

Popups Routes:

• EN video
• RU video
• whole src
• router children
• GET params config
• useGetParameter hook
• URLSearchParams MDN
• GET parameter popup manager
• useGetPopupState hook
• Notifications popup

How to use history.goBack for closing popup

• EN video
• RU video
• whole src

1. Use only history.push
2. Custom Session History
   • history.listen documentation
   • history.listen src
   • updateSessionHistory src
   • setCustomHistory src
   • getCustomHistory src
   • getHasPrevRoute src
   • useClosePopup src
3. Custom Redux History
   • customPush src
   • customGoBack src
   • getHasPrevRoute src
   • closePopup src
4. Использование history state
   • openPopup src
   • closePopup src

Custom Prompt:

• EN video
• RU video
• whole src
• React Router Prompt
• Propmt
• getUserConfirmation
• Custom Prompt
• usePreventReload
• MDN beforeunload

Redirect After Login

• EN video
• RU video
• whole src
• Router src
• AuthRoute src
• react-router Redirect (Auth)
• SignIn src
• Switcher src

Perfect multistep form

• EN video
• RU video
• whole src
• step switcher
• way to change step
• react-final-form usage
• save to sessionStorage
• get from sessionStorage
• clear stepper on leave
• clear sessionStorage

Managing two or more pop-ups via react-router

• EN video
• RU video
• whole src
• FullScreen pop-up inside Similar Pictures
• GetParametersManager
• useGetPopupsState
• useGetParameter
• usePrepareLink