menu

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

Standardized way of using back button with "component" swapping in a page?

January 15, 2020 at 9:36pm

Standardized way of using back button with "component" swapping in a page?

January 15, 2020 at 9:36pm
So, I have n number of components that change out depending on user interaction. The components are housed within a parent page/component, that just dynamically generates these "child" components. I am deciding the best way to implement with the idea use can "use the back button"..... I am using react/react-router.
Have people found it easier/more appropriate to create dynamic routes to achieve this? Or does react-router have a way to "remember" the previous loaded components and cycle thru them?
So lets say my parent page loads in: PARENT PAGE COMPONENT --> Load in child Component A i. User does something --> Load in child Component C i. User clicks something --> Load in child Component D ==> User clicks back button (should go to Component C)
I will know the Pathing of the user at this point....But the URL will not reflect any location change child Component A -> child Component C -> child Component D
I am looking for the standardized way. Use routes/Use back button and programmatically load previous components?
Have you implemented?

January 15, 2020 at 9:59pm
sounds like a big carousel.
Edited
  • reply
  • like
i mean, it could be.. in essence, BUT does a back button handle a carousel....? If you hit the back button, it goes to the last item seen?
  • reply
  • like
You could use react-router nested routing https://tylermcginnis.com/react-router-nested-routes
Or use query params, with something like: https://github.com/BowlingX/geschichte to choose which component to load
  • reply
  • like
The easiest way would definitely be updating the URL's query param. Like, ?component=a|b|c as the component gets swapped, so it's 100% compatible with back button
Otherwise you'd probably need to listen to history.onpopstate event (https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate) and manage your own stack in component state at the Parent level?
  • reply
  • like
yeah, if i don't use the url/ I'll have to set up a listener and use some que'ing/stacking mechanism to pop of the stack as I move etc... a little heavy handed when I can just use a param. Cool, I'm just looking for "best practices". But thanks, appreciate.
like-fill
1
  • reply
  • like

January 17, 2020 at 6:42am
If you want to access each step independently then you should maintain separate URLs. If not then just use a location.pushState at each step and it'll work as you expect. Hardware back button will work too. You'd need to listen to popstate event on window to decide what history state object was ejected and render accordingly.
  • reply
  • like
yeah, if i don't use the url/ I'll have to set up a listener and use some que'ing/stacking mechanism to pop of the stack as I move etc... a little heavy handed when I can just use a param. Cool, I'm just looking for "best practices". But thanks, appreciate.
It's not heavy handed. It's one listener. But it works.
  • reply
  • like