blocksanna.blogg.se - React router dom v6

Ensure proper 404 error on fetcher.load call to a route without a loader ( #10345).Enhance LoaderFunction/ ActionFunction return type to prevent undefined from being a valid return value ( #10267).Allow useRevalidator() to resolve a loader-driven error boundary scenario ( #10369).Fix detection of useNavigate in the render cycle by setting the activeRef in a layout effect, allowing the navigate function to be passed to child components and called in a useEffect there ( #10394).Fix bug preventing rendering of descendant when RouterProvider errors existed ( #10374).Log loader/action errors caught by the default error boundary to the console in dev for easier stack trace evaluation ( #10286).We found some subtle bugs where router state updates got propagated before other normal useState updates, which could lead to foot guns in useEffect calls. Switched from useSyncExternalStore to useState for internal router state syncing in.Fail gracefully on and other invalid URL values ( #10367).

Fix inadvertent re-renders when using Component instead of element on a route definition ( #10287).

Fetchers should no longer revalidate on search params changes or routing to the same URL, and will only revalidate on action submissions or router.revalidate calls ( #10344).

When using BrowserRouter, these hooks remain unstable across location changes because they still rely on useLocation().

When using a RouterProvider, useNavigate/ useSubmit/ fetcher.submit are now stable across location changes, since we can handle relative routing via the instance and get rid of our dependence on useLocation() ( #10336).

If you were previously working around this issue by manually prepending the basename then you will need to remove the manually prepended basename from your fetcher calls ( fetcher.load('/basename/route') -> fetcher.load('/route')).

Enable basename support in useFetcher ( #10336).

Ensure revalidations happen when hash is present ( #10516).

Re-throw DOMException ( DataCloneError) when attempting to perform a PUSH navigation with non-serializable state.

Allow fetcher revalidations to complete if submitting fetcher is deleted ( #10535).

Wrap internal router state updates with React.startTransition ( #10438).

For a quick overview of this usage, check out Ryan's demo on Twitter. This could be useful for waiting for things such as waiting for images or CSS files to load (and technically, yes, you could use it for data loading but we'd still recommend using loaders for that 😀). This means that, for example, if one of your components in a destination route suspends and you have not provided a Suspense boundary to show a fallback, React will delay the rendering of the new UI and show the old UI until that asynchronous operation resolves. With 6.12.0 we've added better support for suspending components by wrapping the internal router state updates in React.startTransition.