From 2058362a807fa7c042eb5ea4a192278b1f3d1241 Mon Sep 17 00:00:00 2001 From: Alex Lobera Date: Sat, 21 May 2022 18:01:04 +0100 Subject: [PATCH 01/16] docs: fix contributing link (#8885) * docs: fix contributing link * chore: add alexlbr to contributors --- CONTRIBUTING.md | 2 +- contributors.yml | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e8b807e74c..a6e637d603 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1 +1 @@ -Please see [our guide to contributing](docs/contributing.md). +Please see [our guide to contributing](docs/guides/contributing.md). diff --git a/contributors.yml b/contributors.yml index 6f4e395143..9b6c67c3e6 100644 --- a/contributors.yml +++ b/contributors.yml @@ -1,5 +1,6 @@ - abhi-kr-2100 - Ajayff4 +- alexlbr - avipatel97 - awreese - bhbs From c9e6681a66b271d52ad9a25da9adbe32f19bd2bc Mon Sep 17 00:00:00 2001 From: Tanay Vardhan Date: Sat, 21 May 2022 13:03:19 -0400 Subject: [PATCH 02/16] Docs: Fix typo in getting-started > concepts (#8888) * docs: fix small typo in getting-started > concepts * Sign CLA: add tanayv to contributors.yml --- contributors.yml | 1 + docs/getting-started/concepts.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index 9b6c67c3e6..48f767f628 100644 --- a/contributors.yml +++ b/contributors.yml @@ -53,6 +53,7 @@ - shihanng - shivamsinghchahar - thisiskartik +- tanayv - ThornWu - timdorr - tkindy diff --git a/docs/getting-started/concepts.md b/docs/getting-started/concepts.md index 770e12ca6d..450b537753 100644 --- a/docs/getting-started/concepts.md +++ b/docs/getting-started/concepts.md @@ -171,7 +171,7 @@ The last two, `{ state, key }`, are React Router specific. **Location Pathname** -This is the part of [URL](#url) after the origin, so for `https://example.com/teams/hotspurs` the pathname is `/teams/hostspurs`. This is the only part of the location that routes match against. +This is the part of [URL](#url) after the origin, so for `https://example.com/teams/hotspurs` the pathname is `/teams/hotspurs`. This is the only part of the location that routes match against. **Location Search** From 4be7677c8ec52ff61c34ad42f58dfe91b272336c Mon Sep 17 00:00:00 2001 From: "remix-cla-bot[bot]" <92060565+remix-cla-bot[bot]@users.noreply.github.com> Date: Sat, 21 May 2022 17:03:21 +0000 Subject: [PATCH 03/16] chore: sort contributors list --- contributors.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index 48f767f628..aec75653e2 100644 --- a/contributors.yml +++ b/contributors.yml @@ -52,8 +52,8 @@ - shamsup - shihanng - shivamsinghchahar -- thisiskartik - tanayv +- thisiskartik - ThornWu - timdorr - tkindy From 110b924b47542ad23ed13313b1ad1574d6723b31 Mon Sep 17 00:00:00 2001 From: Michal Petrik Date: Sun, 22 May 2022 23:19:52 +0200 Subject: [PATCH 04/16] Update overview.md (#8892) * Update overview.md * Update contributors.yml --- contributors.yml | 1 + docs/getting-started/overview.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index aec75653e2..c121988cd2 100644 --- a/contributors.yml +++ b/contributors.yml @@ -60,3 +60,4 @@ - turansky - underager - vijaypushkin +- vikingviolinist diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md index 1fd9cad255..1a6e6363ca 100644 --- a/docs/getting-started/overview.md +++ b/docs/getting-started/overview.md @@ -172,7 +172,7 @@ When the URL is `"/invoices/sent"` the component tree will be: ``` -When the URL is `"/invoices/123"`, the component tree will: +When the URL is `"/invoices/123"`, the component tree will be: ```tsx From 78c643ece072665a252ddfcaef05e23533668c31 Mon Sep 17 00:00:00 2001 From: Michal Antczak <89241214+michal-antczak@users.noreply.github.com> Date: Tue, 24 May 2022 06:37:03 +0200 Subject: [PATCH 05/16] docs: Add info about changes in matchPath() to upgrading/v5 guide (#8894) * Add info about changes in matchPath() to upgrading v5 guide * Add signature --- contributors.yml | 1 + docs/upgrading/v5.md | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+) diff --git a/contributors.yml b/contributors.yml index c121988cd2..b33ad829ae 100644 --- a/contributors.yml +++ b/contributors.yml @@ -61,3 +61,4 @@ - underager - vijaypushkin - vikingviolinist +- michal-antczak diff --git a/docs/upgrading/v5.md b/docs/upgrading/v5.md index 42dff00bbe..526db63459 100644 --- a/docs/upgrading/v5.md +++ b/docs/upgrading/v5.md @@ -891,6 +891,41 @@ To see the exact API of the new `useMatch` hook and its type declaration, check +## Change the order of arguments passed to `matchPath`. Change pathPattern options. + +Since version 6 the order of arguments passed to `matchPath` function has changed. Also pattern options has changed. + +- first argument is pathPattern object, then comes pathname +- pathPattern doesn't include `exact` and `strict` options any more. New `caseSensitive` and `end` options has been added. + +Please refactor it as follows: + +Before: +```js +// This is a React Router v5 app +import { matchPath } from "react-router-dom"; + +const match = matchPath("/users/123", { + path: "/users/:id", + exact: true, // Optional, defaults to false + strict: false // Optional, defaults to false +}); +``` + +After: +```js +// This is a React Router v6 app +import { matchPath } from "react-router-dom"; + +const match = matchPath({ + path: "/users/:id", + caseSensitive: false, // Optional. Should be `true` if the static portions of the `path` should be matched in the same case. + end: true // Optional. Should be `true` if this pattern should match the entire URL pathname +}, "/users/123"); +``` + + + ## `` is not currently supported `` from v5 (along with `usePrompt` and `useBlocker` from the v6 betas) are not included in the current released version of v6. We decided we'd rather ship with what we have than take even more time to nail down a feature that isn't fully baked. We will absolutely be working on adding this back in to v6 at some point in the near future, but not for our first stable release of 6.x. From 36f7202a7fa150a3ad3e879be65ce4dd052c0935 Mon Sep 17 00:00:00 2001 From: "remix-cla-bot[bot]" <92060565+remix-cla-bot[bot]@users.noreply.github.com> Date: Tue, 24 May 2022 04:37:08 +0000 Subject: [PATCH 06/16] chore: sort contributors list --- contributors.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index b33ad829ae..28d85e7384 100644 --- a/contributors.yml +++ b/contributors.yml @@ -40,6 +40,7 @@ - markivancho - mcansh - mfijas +- michal-antczak - morleytatro - noisypigeon - paulsmithkc @@ -61,4 +62,3 @@ - underager - vijaypushkin - vikingviolinist -- michal-antczak From 381e90515289756e40f1620a4196dbd3cad300e9 Mon Sep 17 00:00:00 2001 From: Remix Run Bot Date: Tue, 24 May 2022 04:38:09 +0000 Subject: [PATCH 07/16] chore: format --- docs/upgrading/v5.md | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/docs/upgrading/v5.md b/docs/upgrading/v5.md index 526db63459..b139fddc6a 100644 --- a/docs/upgrading/v5.md +++ b/docs/upgrading/v5.md @@ -893,7 +893,7 @@ To see the exact API of the new `useMatch` hook and its type declaration, check ## Change the order of arguments passed to `matchPath`. Change pathPattern options. -Since version 6 the order of arguments passed to `matchPath` function has changed. Also pattern options has changed. +Since version 6 the order of arguments passed to `matchPath` function has changed. Also pattern options has changed. - first argument is pathPattern object, then comes pathname - pathPattern doesn't include `exact` and `strict` options any more. New `caseSensitive` and `end` options has been added. @@ -901,31 +901,34 @@ Since version 6 the order of arguments passed to `matchPath` function has change Please refactor it as follows: Before: + ```js // This is a React Router v5 app import { matchPath } from "react-router-dom"; const match = matchPath("/users/123", { path: "/users/:id", - exact: true, // Optional, defaults to false - strict: false // Optional, defaults to false + exact: true, // Optional, defaults to false + strict: false, // Optional, defaults to false }); ``` After: + ```js // This is a React Router v6 app import { matchPath } from "react-router-dom"; -const match = matchPath({ - path: "/users/:id", - caseSensitive: false, // Optional. Should be `true` if the static portions of the `path` should be matched in the same case. - end: true // Optional. Should be `true` if this pattern should match the entire URL pathname -}, "/users/123"); +const match = matchPath( + { + path: "/users/:id", + caseSensitive: false, // Optional. Should be `true` if the static portions of the `path` should be matched in the same case. + end: true, // Optional. Should be `true` if this pattern should match the entire URL pathname + }, + "/users/123" +); ``` - - ## `` is not currently supported `` from v5 (along with `usePrompt` and `useBlocker` from the v6 betas) are not included in the current released version of v6. We decided we'd rather ship with what we have than take even more time to nail down a feature that isn't fully baked. We will absolutely be working on adding this back in to v6 at some point in the near future, but not for our first stable release of 6.x. From 715dd233bb57a65c563edd52c4ccd63f37745ddb Mon Sep 17 00:00:00 2001 From: Ryan Florence Date: Fri, 27 May 2022 07:23:23 -0600 Subject: [PATCH 08/16] chore: added needs-response workflow --- .github/workflows/no-response.yml | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 .github/workflows/no-response.yml diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml new file mode 100644 index 0000000000..d40c0eba03 --- /dev/null +++ b/.github/workflows/no-response.yml @@ -0,0 +1,26 @@ +name: 🥺 No Response + +on: + issue_comment: + types: [created] + schedule: + # Schedule for five minutes after the hour, every hour + - cron: "5 * * * *" + +jobs: + noResponse: + if: github.repository == 'remix-run/react-router' + runs-on: ubuntu-latest + + steps: + - name: 🥺 Handle Ghosting + uses: lee-dohm/no-response@v0.5.0 + with: + closeComment: > + This issue has been automatically closed because we haven't received a + response from the original author 🙈. This automation helps keep the issue + tracker clean from issues that are unactionable. Please reach out if you + have more information for us! 🙂 + daysUntilClose: 10 + responseRequiredLabel: needs-response + token: ${{ github.token }} From cdff3943681ad821540329116bac8ac5aa39ccc9 Mon Sep 17 00:00:00 2001 From: Mohamed Sayed Date: Tue, 31 May 2022 05:05:39 +0200 Subject: [PATCH 09/16] Update routes.md (#8910) * Update routes.md use-routes instead of use-route * Update contributors.yml --- contributors.yml | 1 + docs/components/routes.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index 28d85e7384..a959971b14 100644 --- a/contributors.yml +++ b/contributors.yml @@ -62,3 +62,4 @@ - underager - vijaypushkin - vikingviolinist +- ms10596 diff --git a/docs/components/routes.md b/docs/components/routes.md index 7f7df768c0..2858d82e44 100644 --- a/docs/components/routes.md +++ b/docs/components/routes.md @@ -66,4 +66,4 @@ For example, in the following config the parent route renders an `` by d [location]: ../hook/location [outlet]: ./outlet -[use-route]: ../hooks/use-routes +[use-routes]: ../hooks/use-routes From 32a3b1abba0f38ced3dba1aa079c1f49c5932ec4 Mon Sep 17 00:00:00 2001 From: "remix-cla-bot[bot]" <92060565+remix-cla-bot[bot]@users.noreply.github.com> Date: Tue, 31 May 2022 03:05:56 +0000 Subject: [PATCH 10/16] chore: sort contributors list --- contributors.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index a959971b14..98242f3b8e 100644 --- a/contributors.yml +++ b/contributors.yml @@ -42,6 +42,7 @@ - mfijas - michal-antczak - morleytatro +- ms10596 - noisypigeon - paulsmithkc - petersendidit @@ -62,4 +63,3 @@ - underager - vijaypushkin - vikingviolinist -- ms10596 From bd95e76c6e1412c277611d2b5b43cd47baae96ec Mon Sep 17 00:00:00 2001 From: xcsnowcity <1094553181xxcc@gmail.com> Date: Tue, 31 May 2022 11:15:55 +0800 Subject: [PATCH 11/16] docs: Update route.md and routes.md (#8912) * Update route.md change outdated "location" navlink to /utils/location * Update routes.md * Update route.md * Update contributors.yml --- contributors.yml | 1 + docs/components/route.md | 2 +- docs/components/routes.md | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/contributors.yml b/contributors.yml index 98242f3b8e..c7857b4486 100644 --- a/contributors.yml +++ b/contributors.yml @@ -63,3 +63,4 @@ - underager - vijaypushkin - vikingviolinist +- xcsnowcity diff --git a/docs/components/route.md b/docs/components/route.md index f083dbe900..0228fea232 100644 --- a/docs/components/route.md +++ b/docs/components/route.md @@ -64,6 +64,6 @@ For example, in the following config the parent route renders an `` by d ``` -[location]: ../hooks/location +[location]: ../utils/location [outlet]: ./outlet [use-route]: ../hooks/use-routes diff --git a/docs/components/routes.md b/docs/components/routes.md index 2858d82e44..70cae2d61b 100644 --- a/docs/components/routes.md +++ b/docs/components/routes.md @@ -64,6 +64,6 @@ For example, in the following config the parent route renders an `` by d ``` -[location]: ../hook/location +[location]: ../utils/location [outlet]: ./outlet [use-routes]: ../hooks/use-routes From 9fa54d643134cd75a0335581a75db8100ed42828 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Esp=C3=ADn?= Date: Tue, 31 May 2022 17:14:30 +0200 Subject: [PATCH 12/16] docs: Updated TSDoc docs links (#8913) * Fixed TSDoc docs link for react-router components * Fixed TSDoc docs link for react-router hooks * Add missing TSDoc docs link for react-router-dom * Fixed some TSDoc Docs links on react-router * Signed CLA --- contributors.yml | 1 + packages/react-router-dom/index.tsx | 16 ++++++++++++++++ packages/react-router/lib/components.tsx | 14 +++++++------- packages/react-router/lib/hooks.tsx | 20 ++++++++++---------- packages/react-router/lib/router.ts | 8 ++++---- 5 files changed, 38 insertions(+), 21 deletions(-) diff --git a/contributors.yml b/contributors.yml index c7857b4486..f385c852e6 100644 --- a/contributors.yml +++ b/contributors.yml @@ -64,3 +64,4 @@ - vijaypushkin - vikingviolinist - xcsnowcity +- marc2332 diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx index 83ecd0e83b..aa13bf6bd9 100644 --- a/packages/react-router-dom/index.tsx +++ b/packages/react-router-dom/index.tsx @@ -142,6 +142,8 @@ export interface BrowserRouterProps { /** * A `` for use in web browsers. Provides the cleanest URLs. + * + * @see https://reactrouter.com/docs/en/v6/routers/browser-router */ export function BrowserRouter({ basename, @@ -181,6 +183,8 @@ export interface HashRouterProps { /** * A `` for use in web browsers. Stores the location in the hash * portion of the URL so it is not sent to the server. + * + * @see https://reactrouter.com/docs/en/v6/routers/hash-router */ export function HashRouter({ basename, children, window }: HashRouterProps) { let historyRef = React.useRef(); @@ -218,6 +222,8 @@ export interface HistoryRouterProps { * to note that using your own history object is highly discouraged and may add * two versions of the history library to your bundles unless you use the same * version of the history library that React Router uses internally. + * + * @see https://reactrouter.com/docs/en/v6/routers/history-router */ function HistoryRouter({ basename, children, history }: HistoryRouterProps) { const [state, setState] = React.useState({ @@ -258,6 +264,8 @@ export interface LinkProps /** * The public API for rendering a history-aware . + * + * @see https://reactrouter.com/docs/en/v6/components/link */ export const Link = React.forwardRef( function LinkWithRef( @@ -307,6 +315,8 @@ export interface NavLinkProps /** * A wrapper that knows if it's "active" or not. + * + * @see https://reactrouter.com/docs/en/v6/components/nav-link */ export const NavLink = React.forwardRef( function NavLinkWithRef( @@ -384,6 +394,8 @@ if (__DEV__) { * Handles the click behavior for router `` components. This is useful if * you need to create custom `` components with the same click behavior we * use in our exported ``. + * + * @see https://reactrouter.com/docs/en/v6/hooks/use-link-click-handler */ export function useLinkClickHandler( to: To, @@ -425,6 +437,8 @@ export function useLinkClickHandler( /** * A convenient wrapper for reading and writing search parameters via the * URLSearchParams interface. + * + * @see https://reactrouter.com/docs/en/v6/hooks/use-search-params */ export function useSearchParams(defaultInit?: URLSearchParamsInit) { warning( @@ -498,6 +512,8 @@ export type URLSearchParamsInit = * let searchParams = createSearchParams({ * sort: ['name', 'price'] * }); + * + * @see https://reactrouter.com/docs/en/v6/utils/create-search-params */ export function createSearchParams( init: URLSearchParamsInit = "" diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx index c5646ff58b..a569f0febe 100644 --- a/packages/react-router/lib/components.tsx +++ b/packages/react-router/lib/components.tsx @@ -27,7 +27,7 @@ export interface MemoryRouterProps { /** * A that stores all entries in memory. * - * @see https://reactrouter.com/docs/en/v6/api#memoryrouter + * @see https://reactrouter.com/docs/en/v6/routers/memory-router */ export function MemoryRouter({ basename, @@ -72,7 +72,7 @@ export interface NavigateProps { * able to use hooks. In functional components, we recommend you use the * `useNavigate` hook instead. * - * @see https://reactrouter.com/docs/en/v6/api#navigate + * @see https://reactrouter.com/docs/en/v6/components/navigate */ export function Navigate({ to, replace, state }: NavigateProps): null { invariant( @@ -104,7 +104,7 @@ export interface OutletProps { /** * Renders the child route's element, if there is one. * - * @see https://reactrouter.com/docs/en/v6/api#outlet + * @see https://reactrouter.com/docs/en/v6/components/outlet */ export function Outlet(props: OutletProps): React.ReactElement | null { return useOutlet(props.context); @@ -139,7 +139,7 @@ export interface IndexRouteProps { /** * Declares an element that should be rendered at a certain URL path. * - * @see https://reactrouter.com/docs/en/v6/api#route + * @see https://reactrouter.com/docs/en/v6/components/route */ export function Route( _props: PathRouteProps | LayoutRouteProps | IndexRouteProps @@ -167,7 +167,7 @@ export interface RouterProps { * router that is more specific to your environment such as a * in web browsers or a for server rendering. * - * @see https://reactrouter.com/docs/en/v6/api#router + * @see https://reactrouter.com/docs/en/v6/routers/router */ export function Router({ basename: basenameProp = "/", @@ -247,7 +247,7 @@ export interface RoutesProps { * A container for a nested tree of elements that renders the branch * that best matches the current location. * - * @see https://reactrouter.com/docs/en/v6/api#routes + * @see https://reactrouter.com/docs/en/v6/components/routes */ export function Routes({ children, @@ -265,7 +265,7 @@ export function Routes({ * either a `` element or an array of them. Used internally by * `` to create a route config from its children. * - * @see https://reactrouter.com/docs/en/v6/api#createroutesfromchildren + * @see https://reactrouter.com/docs/en/v6/utils/create-routes-from-children */ export function createRoutesFromChildren( children: React.ReactNode diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx index e81c674760..0dbe00ebe5 100644 --- a/packages/react-router/lib/hooks.tsx +++ b/packages/react-router/lib/hooks.tsx @@ -26,7 +26,7 @@ import { * Returns the full href for the given "to" value. This is useful for building * custom links that are also accessible and preserve right-click behavior. * - * @see https://reactrouter.com/docs/en/v6/api#usehref + * @see https://reactrouter.com/docs/en/v6/hooks/use-href */ export function useHref(to: To): string { invariant( @@ -55,7 +55,7 @@ export function useHref(to: To): string { /** * Returns true if this component is a descendant of a . * - * @see https://reactrouter.com/docs/en/v6/api#useinroutercontext + * @see https://reactrouter.com/docs/en/v6/hooks/use-in-router-context */ export function useInRouterContext(): boolean { return React.useContext(LocationContext) != null; @@ -69,7 +69,7 @@ export function useInRouterContext(): boolean { * "routing" in your app, and we'd like to know what your use case is. We may * be able to provide something higher-level to better suit your needs. * - * @see https://reactrouter.com/docs/en/v6/api#uselocation + * @see https://reactrouter.com/docs/en/v6/hooks/use-location */ export function useLocation(): Location { invariant( @@ -86,7 +86,7 @@ export function useLocation(): Location { * Returns the current navigation action which describes how the router came to * the current location, either by a pop, push, or replace on the history stack. * - * @see https://reactrouter.com/docs/en/v6/api#usenavigationtype + * @see https://reactrouter.com/docs/en/v6/hooks/use-navigation-type */ export function useNavigationType(): NavigationType { return React.useContext(LocationContext).navigationType; @@ -97,7 +97,7 @@ export function useNavigationType(): NavigationType { * This is useful for components that need to know "active" state, e.g. * . * - * @see https://reactrouter.com/docs/en/v6/api#usematch + * @see https://reactrouter.com/docs/en/v6/hooks/use-match */ export function useMatch< ParamKey extends ParamParseKey, @@ -134,7 +134,7 @@ export interface NavigateOptions { * Returns an imperative method for changing the location. Used by s, but * may also be used by other elements to change the location. * - * @see https://reactrouter.com/docs/en/v6/api#usenavigate + * @see https://reactrouter.com/docs/en/v6/hooks/use-navigate */ export function useNavigate(): NavigateFunction { invariant( @@ -198,7 +198,7 @@ const OutletContext = React.createContext(null); /** * Returns the context (if provided) for the child route at this level of the route * hierarchy. - * @see https://reactrouter.com/docs/en/v6/api#useoutletcontext + * @see https://reactrouter.com/docs/en/v6/hooks/use-outlet-context */ export function useOutletContext(): Context { return React.useContext(OutletContext) as Context; @@ -208,7 +208,7 @@ export function useOutletContext(): Context { * Returns the element for the child route at this level of the route * hierarchy. Used internally by to render child routes. * - * @see https://reactrouter.com/docs/en/v6/api#useoutlet + * @see https://reactrouter.com/docs/en/v6/hooks/use-outlet */ export function useOutlet(context?: unknown): React.ReactElement | null { let outlet = React.useContext(RouteContext).outlet; @@ -224,7 +224,7 @@ export function useOutlet(context?: unknown): React.ReactElement | null { * Returns an object of key/value pairs of the dynamic params from the current * URL that were matched by the route path. * - * @see https://reactrouter.com/docs/en/v6/api#useparams + * @see https://reactrouter.com/docs/en/v6/hooks/use-params */ export function useParams< ParamsOrKey extends string | Record = string @@ -261,7 +261,7 @@ export function useResolvedPath(to: To): Path { * elements in the tree must render an to render their child route's * element. * - * @see https://reactrouter.com/docs/en/v6/api#useroutes + * @see https://reactrouter.com/docs/en/v6/hooks/use-routes */ export function useRoutes( routes: RouteObject[], diff --git a/packages/react-router/lib/router.ts b/packages/react-router/lib/router.ts index a5165980d5..a0c316ba67 100644 --- a/packages/react-router/lib/router.ts +++ b/packages/react-router/lib/router.ts @@ -98,7 +98,7 @@ export interface RouteObject { /** * Returns a path with params interpolated. * - * @see https://reactrouter.com/docs/en/v6/api#generatepath + * @see https://reactrouter.com/docs/en/v6/utils/generate-path */ export function generatePath(path: string, params: Params = {}): string { return path @@ -136,7 +136,7 @@ export interface RouteMatch { /** * Matches the given routes to a location and returns the match data. * - * @see https://reactrouter.com/docs/en/v6/api#matchroutes + * @see https://reactrouter.com/docs/en/v6/utils/match-routes */ export function matchRoutes( routes: RouteObject[], @@ -383,7 +383,7 @@ type Mutable = { * Performs pattern matching on a URL pathname and returns information about * the match. * - * @see https://reactrouter.com/docs/en/v6/api#matchpath + * @see https://reactrouter.com/docs/en/v6/utils/match-path */ export function matchPath< ParamKey extends ParamParseKey, @@ -502,7 +502,7 @@ function safelyDecodeURIComponent(value: string, paramName: string) { /** * Returns a resolved path object relative to the given pathname. * - * @see https://reactrouter.com/docs/en/v6/api#resolvepath + * @see https://reactrouter.com/docs/en/v6/utils/resolve-path */ export function resolvePath(to: To, fromPathname = "/"): Path { let { From a8235ddb89ee066d3f3e2a39b1aaf642e79cfc28 Mon Sep 17 00:00:00 2001 From: "remix-cla-bot[bot]" <92060565+remix-cla-bot[bot]@users.noreply.github.com> Date: Tue, 31 May 2022 15:14:42 +0000 Subject: [PATCH 13/16] chore: sort contributors list --- contributors.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index f385c852e6..e74157d22e 100644 --- a/contributors.yml +++ b/contributors.yml @@ -37,6 +37,7 @@ - liuhanqu - lqze - lukerSpringTree +- marc2332 - markivancho - mcansh - mfijas @@ -64,4 +65,3 @@ - vijaypushkin - vikingviolinist - xcsnowcity -- marc2332 From f3d87dcc91fbd6fd646064b88b4be52c15114603 Mon Sep 17 00:00:00 2001 From: Remix Run Bot Date: Tue, 31 May 2022 15:15:47 +0000 Subject: [PATCH 14/16] chore: format --- packages/react-router-dom/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx index aa13bf6bd9..a8df0aa649 100644 --- a/packages/react-router-dom/index.tsx +++ b/packages/react-router-dom/index.tsx @@ -142,7 +142,7 @@ export interface BrowserRouterProps { /** * A `` for use in web browsers. Provides the cleanest URLs. - * + * * @see https://reactrouter.com/docs/en/v6/routers/browser-router */ export function BrowserRouter({ From 258b6149a139634777a88791f7e586084a14480c Mon Sep 17 00:00:00 2001 From: 42shadow42 <42shadow42@gmail.com> Date: Fri, 3 Jun 2022 07:54:44 -0500 Subject: [PATCH 15/16] Update hooks.tsx --- packages/react-router/lib/hooks.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx index 0dbe00ebe5..5a85f16dff 100644 --- a/packages/react-router/lib/hooks.tsx +++ b/packages/react-router/lib/hooks.tsx @@ -153,7 +153,7 @@ export function useNavigate(): NavigateFunction { ); let activeRef = React.useRef(false); - React.useEffect(() => { + React.useLayoutEffect(() => { activeRef.current = true; }); @@ -165,8 +165,6 @@ export function useNavigate(): NavigateFunction { `your component is first rendered.` ); - if (!activeRef.current) return; - if (typeof to === "number") { navigator.go(to); return; From d644b50be46560b45bdad19dd2a41cac1d8ae6fc Mon Sep 17 00:00:00 2001 From: Nathaniel Hunter <42shadow42@gmail.com> Date: Fri, 3 Jun 2022 08:45:57 -0500 Subject: [PATCH 16/16] Fix failing tests, and new test cases to expose regression issues with useNavigate --- packages/react-router-dom-v5-compat/index.ts | 4 +- .../lib/components.tsx | 2 +- .../__tests__/useNavigate-test.tsx | 73 +++++++++++++++++++ 3 files changed, 76 insertions(+), 3 deletions(-) diff --git a/packages/react-router-dom-v5-compat/index.ts b/packages/react-router-dom-v5-compat/index.ts index 673db4f153..c2b848af55 100644 --- a/packages/react-router-dom-v5-compat/index.ts +++ b/packages/react-router-dom-v5-compat/index.ts @@ -69,7 +69,7 @@ export type { Pathname, Search, RoutesProps, -} from "./react-router-dom"; +} from "../react-router-dom"; export { BrowserRouter, HashRouter, @@ -108,7 +108,7 @@ export { useResolvedPath, useRoutes, useSearchParams, -} from "./react-router-dom"; +} from "../react-router-dom"; export type { StaticRouterProps } from "./lib/components"; export { CompatRouter, CompatRoute, StaticRouter } from "./lib/components"; diff --git a/packages/react-router-dom-v5-compat/lib/components.tsx b/packages/react-router-dom-v5-compat/lib/components.tsx index fd5eefb65d..f0e0a7c204 100644 --- a/packages/react-router-dom-v5-compat/lib/components.tsx +++ b/packages/react-router-dom-v5-compat/lib/components.tsx @@ -9,7 +9,7 @@ import { useHistory, Route as RouteV5 } from "react-router-dom"; // We are a wrapper around react-router-dom v6, so bring it in // and bundle it because an app can't have two versions of // react-router-dom in its package.json. -import { Router, Routes, Route } from "../react-router-dom"; +import { Router, Routes, Route } from "../../react-router-dom"; // v5 isn't in TypeScript, they'll also lose the @types/react-router with this // but not worried about that for now. diff --git a/packages/react-router/__tests__/useNavigate-test.tsx b/packages/react-router/__tests__/useNavigate-test.tsx index 8502fea9b8..ffce47a70b 100644 --- a/packages/react-router/__tests__/useNavigate-test.tsx +++ b/packages/react-router/__tests__/useNavigate-test.tsx @@ -50,6 +50,77 @@ describe("useNavigate", () => { `); }); + it("transitions to the new location when called immediately", () => { + const Home = React.forwardRef(function Home(_props, ref) { + let navigate = useNavigate(); + + React.useImperativeHandle(ref, () => ({ + navigate: () => navigate("/about") + })) + + return null + }) + + let homeRef; + + let renderer: TestRenderer.ReactTestRenderer; + renderer = TestRenderer.create( + + + homeRef = ref} />} /> + About} /> + + + ); + + TestRenderer.act(() => { + homeRef.navigate(); + }) + + expect(renderer.toJSON()).toMatchInlineSnapshot(` +

+ About +

+ `); + }); + + it("allows navigation in child useEffects", () => { + function Child({ onChildRendered }) { + + React.useEffect(() => { + onChildRendered(); + }); + + return null; + } + + function Parent() { + let navigate = useNavigate(); + + let onChildRendered = React.useCallback(() => navigate("/about"), []); + + return ; + } + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + } /> + About} /> + + + ); + }); + + expect(renderer.toJSON()).toMatchInlineSnapshot(` +

+ About +

+ `); + }); + describe("with state", () => { it("adds the state to location.state", () => { function Home() { @@ -97,4 +168,6 @@ describe("useNavigate", () => { `); }); }); + + });