Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add better docs and console errors for data router features #9311

Merged
merged 4 commits into from
Sep 22, 2022

Conversation

brophdawg11
Copy link
Contributor

@brophdawg11 brophdawg11 commented Sep 20, 2022

A few folks have messaged in discord trying to use ScrollRestoration and other data-router-only hooks inside BrowserRouter so I went though the new hooks and added the <docs-warning> to them with a link to "Picking a Router".

I left out a few hooks like useLoaderData, useActionData since they seemed self-explanatory?

I also updated the implementation to leverage internal private useDataRouterContext and useDataRouterState hooks that will print a better error message if called in BrowserRouter:

For example:

useMatches must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.

@changeset-bot
Copy link

changeset-bot bot commented Sep 20, 2022

🦋 Changeset detected

Latest commit: 3a07532

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
react-router Patch
react-router-dom Patch
react-router-dom-v5-compat Patch
react-router-native Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@brophdawg11
Copy link
Contributor Author

Note to self- let's make the error message a bit clearer with a useInDataRouterContext type hook, and point them to the "picking a router" docs page in the error message.

@brophdawg11 brophdawg11 changed the base branch from main to dev September 22, 2022 16:31
@brophdawg11 brophdawg11 force-pushed the brophdawg11/scroll-restoration-docs branch from e6a5b31 to 7f68b82 Compare September 22, 2022 16:31
@brophdawg11 brophdawg11 changed the title docs: add data router note to ScrollRestoration docs: add better docs and console errors for data router features Sep 22, 2022
enum DataRouterStateHook {
UseFetchers = "useFetchers",
UseScrollRestoration = "useScrollRestoration",
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enums to represent the hooks that require a data router

Comment on lines +662 to +672
function useDataRouterContext(hookName: DataRouterHook) {
let ctx = React.useContext(DataRouterContext);
invariant(ctx, getDataRouterConsoleError(hookName));
return ctx;
}

function useDataRouterState(hookName: DataRouterStateHook) {
let state = React.useContext(DataRouterStateContext);
invariant(state, getDataRouterConsoleError(hookName));
return state;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All hooks should use the internal hooks to get access to the contexts, so that we get consistent error messaging across the board

@ryanflorence ryanflorence merged commit d8e6d7f into dev Sep 22, 2022
@ryanflorence ryanflorence deleted the brophdawg11/scroll-restoration-docs branch September 22, 2022 17:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants