T
TanStack•2y ago
like-gold

How can I execute several navigations sequentially?

Hey 👋🏽 , I have following use case: There's a list of users. The list offers an onUserSelect and an onUserClick callback. My eventhandler of the onUserSelect, looks like this: 
const handleUserSelection = (user) => {
  navigate({
    search: (prev) => {
      return { ...prev, selectedUser: user.id };
    }
  });
}
const handleUserSelection = (user) => {
  navigate({
    search: (prev) => {
      return { ...prev, selectedUser: user.id };
    }
  });
}
and the eventhandler of the onUserClick, looks like this: 
const handleUserClick = (user) => {
  navigate({
    to: "/users/$userId",
    params: { userId: user.id 
  });
}
const handleUserClick = (user) => {
  navigate({
    to: "/users/$userId",
    params: { userId: user.id 
  });
}
The result is that you are navigated to /users/$userId. The search navigation is not executed. If you return to /users/index, the user is not selected. After that I tried following: 
const handleUserSelection = (user) => {
  navigate({
    search: (prev) => {
      return { ...prev, selectedUser: user.id };
    }
  });
  navigate({
    to: "/users/$userId",
    params: { userId: user.id 
  });
}
const handleUserSelection = (user) => {
  navigate({
    search: (prev) => {
      return { ...prev, selectedUser: user.id };
    }
  });
  navigate({
    to: "/users/$userId",
    params: { userId: user.id 
  });
}
How can I first perform the searchParam navigation and then the navigation to /users/$userId? Thanks!
1 Reply
correct-apricot
correct-apricot•2y ago
I don't understand which handler is executed on which click, but you should be able to await the Promise that navigate() returns

Did you find this page helpful?