Skip to content

Commit

Permalink
docs: add data router note to ScrollRestoration
Browse files Browse the repository at this point in the history
  • Loading branch information
brophdawg11 committed Sep 20, 2022
1 parent f722d7f commit e6a5b31
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 4 deletions.
3 changes: 3 additions & 0 deletions docs/components/scroll-restoration.md
Expand Up @@ -7,6 +7,8 @@ new: true

This component will emulate the browser's scroll restoration on location changes after loaders have completed to ensure the scroll position is restored to the right spot, even across domains.

<docs-warning>This feature only works if using a data router, see [Picking a Router][pickingarouter]</docs-warning>

You should only render one of these and it's recommended you render it in the root route of your app:

```tsx [1,7]
Expand Down Expand Up @@ -97,3 +99,4 @@ Server Rendering frameworks can prevent scroll flashing because they can send a

[remix]: https://remix.run
[preventscrollreset]: ../components/link#preventscrollreset
[pickingarouter]: ../routers/picking-a-router
4 changes: 2 additions & 2 deletions docs/route/action.md
Expand Up @@ -7,7 +7,7 @@ new: true

Route actions are the "writes" to route [loader][loader] "reads". They provide a way for apps to perform data mutations with simple HTML and HTTP semantics while React Router abstracts away the complexity of asynchronous UI and revalidation. This gives you the simple mental model of HTML + HTTP (where the browser handles the asynchrony and revalidation) with the behavior and UX capabilities of modern SPAs.

<docs-error>This feature only works if using a data router like [`createBrowserRouter`][createbrowserrouter]</docs-error>
<docs-warning>This feature only works if using a data router, see [Picking a Router][pickingarouter]</docs-warning>

```tsx
<Route
Expand Down Expand Up @@ -144,4 +144,4 @@ For more details and expanded use cases, read the [errorElement][errorelement] d
[workingwithformdata]: ../guides/form-data
[useactiondata]: ../hooks/use-action-data
[returningresponses]: ./loader#returning-responses
[createbrowserrouter]: ../routers/create-browser-router
[pickingarouter]: ../routers/picking-a-router
4 changes: 2 additions & 2 deletions docs/route/error-element.md
Expand Up @@ -7,7 +7,7 @@ new: true

When exceptions are thrown in [loaders][loader], [actions][action], or component rendering, instead of the normal render path for your Routes (`<Route element>`), the error path will be rendered (`<Route errorElement>`) and the error made available with [`useRouteError`][userouteerror].

<docs-error>This feature only works if using a data router like [`createBrowserRouter`][createbrowserrouter]</docs-error>
<docs-warning>This feature only works if using a data router, see [Picking a Router][pickingarouter]</docs-warning>

```tsx
<Route
Expand Down Expand Up @@ -213,4 +213,4 @@ The project route doesn't have to think about errors at all. Between the loader
[response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
[isrouteerrorresponse]: ../utils/is-route-error-response
[json]: ../fetch/json
[createbrowserrouter]: ../routers/create-browser-router
[pickingarouter]: ../routers/picking-a-router
3 changes: 3 additions & 0 deletions docs/route/should-revalidate.md
Expand Up @@ -7,6 +7,8 @@ new: true

This function allows you opt-out of revalidation for a route's loader as an optimization.

<docs-warning>This feature only works if using a data router, see [Picking a Router][pickingarouter]</docs-warning>

There are several instances where data is revalidated, keeping your UI in sync with your data automatically:

- After an [`action`][action] is called from a [`<Form>`][form].
Expand Down Expand Up @@ -76,3 +78,4 @@ interface ShouldRevalidateFunction {
[loader]: ./loader
[useloaderdata]: ../hooks/use-loader-data
[params]: ./route#dynamic-segments
[pickingarouter]: ../routers/picking-a-router

0 comments on commit e6a5b31

Please sign in to comment.