agile burrow
I'm redirecting to the /success page after a successful loader.
When I'm on the /success page, how do I prevent user from clicking back?
`export const loader: LoaderFunction = async ({
request,
params,
}: LoaderArgs) => {
.......
return redirect(/success/id/${id});
};`
lean gorge
I'm redirecting to the /success page after a successful loader.
When I'm on the ...
I'm not quite sure what you mean here. Do you mean to avoid browser history history stack?
agile burrow
Maybe? I want to prevent them from going back to this page
After they are redirected to the /success….
lean gorge
Why woud you want to prevent them from going back?
You can always just navigate back to that route.
Although depending on your use case it might just redirect them back to the success page again
agile burrow
To avoid them doing same thing again. It’s just our requirement
lean gorge
do not fear, jacob is here
sharp sorrel
The mental model here is to submit a form to the target route using replace, and then don't redirect in the action
or the action can redirect to the same page
the history entry is added when the form submits, not when the action responds
agile burrow
Sorry i’m using it in the loader function. And i’m calling an api to check if a certain status is met, then redirect to the /success page.
That’s why I’m using redirect()
There’s no form submission here
sharp sorrel
Ah I see
the redirect still won't cause an extra history entry
It'll be the link you clicked to go to the page in the first place that adds it
agile burrow
So when I’m on the /success page, how will I prevent them from going back to this page?
I still can see that I’m able to click the browsers back button
sharp sorrel
What would you expect to happen if the user manually typed in the previous URL?
If you handle that case, then there's some javascript solutions you can use to remove the previous history entry to stop the back button from working
but it's best to handle that case first because otherwise users can still get around your system, and if JS doesn't work they will still be able to press the back button
lean gorge
And depending on exactly how this page is supposed to work, you could return a { success: true } from your loader to just conditionally display the success message.
You avoid pushing to the browser stack at all and it also stays on a single route.
sharp sorrel
Maybe its best to erase the browser stack?
it's possible to erase the history, but not reliable. There's lots of reasons why user would still be able to press back, and even if it works they could enter the URL for the previous page manually
agile burrow
I understand that he can enter it manually. This is just for user experience purposes
sharp sorrel
ah actually I'm wrong, it looks like for security reasons you can't drop off the last history stack item anymore
browsers won't allow it
so the only solution is with <Link replace or <Form replace
or as revel mentioned to not use a separate route for the success page, and just return data from the loader to render the success message instead of the current page
then there's no history management to worry about at all
lean gorge
What would the original page be if it doesnt redirect?
Is it possible to get a little more information?
agile burrow
This page is a payment page where we display QR code
/payment
Users scan this QR
And where we are polling an api on this page
And if its a success then redirect to /success page
lean gorge
And depending on exactly how this page is supposed to work, you could return a `...
Gotcha, this could prob be done on the same page using this if you really would like to avoid the history stack.
agile burrow
/success page is really needed though. That’s just a requirement again 😦
sharp sorrel
And where we are polling an api on this page
Can you poll the API in an action instead?
with a form set to replace the history entry
lean gorge
That's what I was thinking but it seems messy.
Also, how are you polling with the loader? Or is this just for the initial load?
agile burrow
Im using useFetcher and setInterval
sharp sorrel
can you show the fetcher interval code?
opaque void
This seems like if they were on the /success page and they hit back they would just be redirected to the same success page again since the condition should be met, no?
You could redirect from /payment back to /success with a param like /success/${data?.id}?alreadyPaid="true" and then show a toast or something telling the user they can't go back since they already paid or something.
If the actual requirement is to disable the back button somehow or manually change the history stack then I would just say no and die on that hill 😂
I mean I'm kidding but also 👀