navigate() isn’t working after async operation.
I have this function to handle submit event of a form. In this function I am making an api call to save the data in backend and after awaiting that api call I am using navigate to /something route. But somehow it is not working and if I remove await from that api call then it works.
Any idea why this might be happening ?
This is my Function. It is just not working with awaiting addRole function. If I use the commented part and await the Promise with setTimeout then It is working properly.
12 Replies
Turns out that the url is changing but content is not.
Could it be because of the new router configurations?
I am not sure about this one, I'll take a detailed look tomorrow
Thanks man. Please look into that and let me know
Hi @charles , This is another scenario,
If I do,
navigate(-1) then also it works as expected. But this wouldn't be a proper solution, as I want to redirect to a specific path.
I found the same question on Stackoverflow
https://stackoverflow.com/questions/68825965/react-router-v6-usenavigate-doesnt-navigate-if-replacing-last-element-in-pathStack Overflow
React Router v6 useNavigate() doesn't navigate if replacing last el...
I have a react component with the following function
const handleNavigate = (clientId) => {
console.log(clientId)
navigate(
/dashboard/clients/${clientId})
}
The consol...Turns out when my form renders for the first time, and when I submit it for the first time; The navigate() method is being executed but it only changes the url. And then again when I submit the form, I am getting redirected to the correct route.
Just don't know what the error is.
Hi @charles , Did you get a chance to look at this issue ? are you able to reproduce ?
Actually my Component is similar to
SettingsNewObject.tsx component and it does have the same implementation. but Somehow my component is failing and the other one is working perfectly.Hi @D_Gamer, I had a quick look but could not reproduce. Any change, you could make a minimal reproduction on twenty fork so I can pull your fork and test it?
Hi @charles, I am sharing my code with you.
See, these are my custom features. Which were working fine on 0.4.0 and Now that I started the merge, I am getting this navigation issue. Which is strange because, The <SettingsObjects/> and <SettingsNewObject/> components are at the same level as my feature.
This is the <SettingsNewRole/> Component in which I am getting the navigation issue.
You can see the
handleSave function, which is supposed to wait for the api call to be resolved and then navigate to a correct route and re-render the page. (The Same approach is being used on <SettingsNewObject/> and things are working properly there.)
Although, if I remove await from addRole function call inside handleSave then it will work. and the event on Cancel button is working fine as well.
This is
useWorkspaceRolesForSettings hook. if you want to take a look at addRole function.
@D_Gamer happy to take a look, could you send me those as code and not images? Will take me too much time to write it down 😉
@D_Gamer do you still need help here?
Not right now.
Thanks for noticing man !