Refreshing parent route data from child route #10361
-
I have a child route that manipulates some data which happens to be displayed in the parent component. When the child route does this, I need the data in the parent component to be refreshed. In looking at the docs, I don't see anything that would assist with this particular issue, is there any kind of guidance someone can give me for a scenario like this? Sure, I could theoretically restructure the component/route hierarchy, but assuming that remains fixed, is there anything react-router can do for me here? The only way I currently see is to reload the entire route so as to retrigger all loaders in the route tree (not great). Seems to me you are stuck needing some cross-component messaging or more complicated state management like Redux to tell the parent to re-fetch its data otherwise. Thanks in advance for any help. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
use react context or handle child component event |
Beta Was this translation helpful? Give feedback.
-
Are you manipulating via an If you're not mutating via the built-in APIs, I would suggest trying that first. But if you need to mutate outside of the react-router APIs, then you will need to manually revalidate via |
Beta Was this translation helpful? Give feedback.
Are you manipulating via an
action
(<Form method="post">
,useSubmit
,fetcher.submit
)? If so, all loaders should revalidate by default and you can useshouldRevalidate
to opt out of revalidation on certain active loaders if they do not need to be refreshed based on the data mutation.If you're not mutating via the built-in APIs, I would suggest trying that first. But if you need to mutate outside of the react-router APIs, then you will need to manually revalidate via
useRevalidator
and can again leverageshouldRevalidate
to opt-out of revalidation for certain loaders.