react-router
react-router copied to clipboard
Expose routing promises
In order for React Router transitions to compose with React 19 transitions we need to expose the promises from all of our transition functions:
navigate()
submit()
fetcher.submit()
fetcher.load()
revalidator.revalidate()
This way developers can call into React Router from inside a React transition
let [isPending, startTransition] = useTransition()
startTransition(async () => {
let stuff = await doSomething()
let more = await fetcher.submit({ stuff }, { method: "post" })
});
Will add in 7.1
Very cool! I guess you can do this as well.
const [isPending, startTransition] = useTransition()
startTransition(async () => {
const [more, stuff] = await Promise.all([fetcher.submit({ stuff }, { method: "post" }), doSomething()]);
});
@ryanflorence so, is that included in [email protected]? if not, any ETA on this topic? Looking forward to it, thanks :-)
@wondering639 this is already on v7
Parts of this are on v7 - the methods return promises - but at the moment they don't resolve through with the data since that posed some technical issues when we first did the work. We do hope to get that added in the future though.
let result = await fetcher.submit();
// result will be undefined, `data` will be in `fetcher.data`
For me it was not working as expected. When I tried the results for the first time, fetcher.data was undefined.
However, if you submit again, fetcher.data will return the result from the first submission, as if there is a one-step delay.
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const formData = new FormData();
formData.append("action", "createUploadUrl");
await fetcher.submit(formData, {
method: "post",
action: "/resources/upload",
});
console.log("data", fetcher.data);
}
🤖 Hello there,
We just published version 6.28.2-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!
Thanks!