1

I have an app which has three steps. You can navigate through each step from within the step components. There's also a back button which allows you to go back to the previous step. Currently when you click on a step it updates the url with the step path. I need the URL to NOT update. I can get this to work if I use MemoryRouter instead of Router but this stops the back button from working.

Is there another way to do this?

Here's my sandbox https://codesandbox.io/s/pm1olx2ml7

user3486427
  • 361
  • 4
  • 14
  • Why do you want to not update the URL and since with memoryRouter you don't update the url, the url is not changing and hence the browser back button won't work – Shubham Khatri Jun 27 '18 at 08:52
  • I don't want the user to be able to access the app at step 2 or 3 they should only be able to enter on step 1. But I need the back button within each step. – user3486427 Jun 27 '18 at 09:13
  • The browser back button won't work, but you will still be able to use a button with history.goBack(). https://codesandbox.io/s/monj2plzp9 works with the goBack button – Shubham Khatri Jun 27 '18 at 09:23

1 Answers1

1

You can make it work with the withRouter HOC. Like this: https://codesandbox.io/s/monj2plzp9

Clafou
  • 2,335
  • 2
  • 24
  • 33
  • Basically I need a back button within each step but I don't want the URL to update. The reason for this is I don't want the user to be able to access the app at step 2 or 3 they should only be able to enter on step 1. – user3486427 Jun 27 '18 at 09:12
  • I just saw that I didn't hit the save button on codesandbox... You can have a look at it, it should now show what I wanted to show you. – Clafou Jun 27 '18 at 09:23