React-router: Prevent navigation with <Prompt> for specific routes

[camilosw]

I'm working on a wizard that allows to move back and forward through certain routes and save the data in a store before sending it to the backend in the last step. I need to prevent the user to move outside those specific routes but allow them to move to the next or previous route. Unfortunately, there is no way to instruct Prompt about what routes to prevent.

The proposed solution is that when accepts a function. This function will receive the next path and returns a boolean to prevent or allow navigation like in the example below.

<>
  <Prompt when={nextPath => !wizardPaths.includes(nextPath)}} message="Are you sure?" />
  <Switch>
    <Route path="form/step-1">
      <Form1 />
    </Route>
    <Route path="form/step-2">
      <Form2 />
    </Route>
  </Switch>
</>

[support[bot]]

:wave: @camilosw, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out.
Please feel free to clarify your issue if you think it was closed prematurely.

[camilosw]

This feature request was wrongly marked as support. I was not asking for support, the idea is to improve Prompt to make it more flexible.

[Sin9k]

@camilosw If i understand correctly, Prompt based on history.block
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Prompt.js#L19

but they are going to remove history.block from react-router
https://github.com/ReactTraining/history/issues/690

but it was long time ago and prompt has exist yet

[Sin9k]

@camilosw after answering to you i decided to create a short video with explanation how this functionality (Prompt) works. The answer on your issue is insert Prompt inside in Form1 and Form2 and handle with getUserConfirmation in one place. For more deep explanation watch the video

EN: https://youtu.be/ZE5I9RbMaGY
RU: https://youtu.be/qDJ2OMcz8is