diff --git a/contributors.yml b/contributors.yml index 334d8f8f5c..2efb4eb856 100644 --- a/contributors.yml +++ b/contributors.yml @@ -365,6 +365,7 @@ - valerii15298 - ValiantCat - vdusart +- vezaynk - VictorElHajj - vijaypushkin - vikingviolinist @@ -388,3 +389,4 @@ - yuleicul - zeromask1337 - zheng-chuang + diff --git a/docs/api/data-routers/RouterProvider.md b/docs/api/data-routers/RouterProvider.md index 6d1f9c4714..7fc612aeae 100644 --- a/docs/api/data-routers/RouterProvider.md +++ b/docs/api/data-routers/RouterProvider.md @@ -31,7 +31,39 @@ createRoot(document.getElementById("root")).render( [modes: data] -_No documentation_ +Provides `flushSync` implementation required for using the `flushSync` option in navigation functions provided by [`useNavigate`](/api/hooks/useNavigate#signature) and [`useSearchParams`](/api/hooks/useSearchParams#setsearchparams-function). + +```tsx +import { + RouterProvider, + createBrowserRouter, +} from "react-router"; +import { flushSync } from 'react-dom' +import { createRoot } from "react-dom/client"; +let router = createBrowserRouter(); +createRoot(document.getElementById("root")).render( + { + flushSync(fn); + }} + /> +); +``` + +This prop is provided automatically if the `RouterProvider` is imported from the `react-router/dom` package. + +```tsx +import { + createBrowserRouter, +} from "react-router"; +import { RouterProvider } from "react-router/dom"; +import { createRoot } from "react-dom/client"; +let router = createBrowserRouter(); +createRoot(document.getElementById("root")).render( + +); +``` ### router