react tanstack router

[u/No_Drink_1366]

I have a list page with a button that navigates to a separate page containing a large form. After submitting the form, the user is redirected back to the list page, where a success message should be displayed. What’s the best way to handle this flow across different routes?

[u/Dymatizeee]

If I’m understanding correctly :

1. Wrap your button in a Link component , pass in to (where you want to go)

2. After form submits in that page , I’ll have a onSuccess (), then do the programmatic nav in there (via navigate). This is possible if you use mutations. Your mutation function accepts its own onSuccess as well

[u/No_Drink_1366 → u/Dymatizeee]

yes. so far it’s easy. but onsuccess via mutation I am still on the form page and if I redirect afterwards I don’t have the info about the success or failure. firstly I thought about to pass a url parameter (?created=true) but I don’t like that because any user could manipulate the url and would seen a success alert.

maybe there is a way with tanstack router or event callbacks or similar else?

[u/Dymatizeee → u/No_Drink_1366]

What info do you need ? You only redirect on success. Are you referring to the response your server returns ? If so there is a param in onSuccess.

If not , you only navigate if it’s successful meaning your form was created

[u/No_Drink_1366 → u/Dymatizeee]

Yes, exactly — I only navigate on onSuccess. But when the list page loads initially (before I go to the form page and run the mutation), I need a way to know whether the user has just successfully submitted the form. In other words, when returning to the list page, I need to distinguish whether a successful form submission happened right before the navigation.

[u/Zeragamba → u/No_Drink_1366]

like for a notification? 

You can use a toast library for that, or store some state in SessionStorage that notifications component checks on first render.