From fda9cbcf81ab79db980b0ce537c1bd2f4106acf0 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Mon, 8 Nov 2021 13:32:10 -0800 Subject: [PATCH 1/4] feat: added forceDocument to `` --- .../__tests__/link-click-test.tsx | 59 +++++++++++++++---- packages/react-router-dom/index.tsx | 5 +- 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/packages/react-router-dom/__tests__/link-click-test.tsx b/packages/react-router-dom/__tests__/link-click-test.tsx index 15bfe7035e..4ecbcb4eee 100644 --- a/packages/react-router-dom/__tests__/link-click-test.tsx +++ b/packages/react-router-dom/__tests__/link-click-test.tsx @@ -3,15 +3,15 @@ import * as ReactDOM from "react-dom"; import { act } from "react-dom/test-utils"; import { MemoryRouter, Routes, Route, Link } from "react-router-dom"; -function click(anchor: HTMLAnchorElement, eventInit?: MouseEventInit): void { - anchor.dispatchEvent( - new MouseEvent("click", { - view: window, - bubbles: true, - cancelable: true, - ...eventInit - }) - ); +function click(anchor: HTMLAnchorElement, eventInit?: MouseEventInit) { + let event = new MouseEvent("click", { + view: window, + bubbles: true, + cancelable: true, + ...eventInit + }); + anchor.dispatchEvent(event); + return event; } describe("A click", () => { @@ -51,15 +51,54 @@ describe("A click", () => { let anchor = node.querySelector("a"); expect(anchor).not.toBeNull(); + let event: MouseEvent; act(() => { - click(anchor); + event = click(anchor); }); + expect(event.defaultPrevented).toBe(true); let h1 = node.querySelector("h1"); expect(h1).not.toBeNull(); expect(h1?.textContent).toEqual("About"); }); + describe("when forceDocument specified", () => { + it("does not prevent default", () => { + function Home() { + return ( +
+

Home

+ + About + +
+ ); + } + + act(() => { + ReactDOM.render( + + + } /> + About} /> + + , + node + ); + }); + + let anchor = node.querySelector("a"); + expect(anchor).not.toBeNull(); + + let event: MouseEvent; + act(() => { + event = click(anchor); + }); + + expect(event.defaultPrevented).toBe(false); + }); + }); + describe("when preventDefault is used on the click handler", () => { it("stays on the same page", () => { function Home() { diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx index eb74683ea4..9b52433f05 100644 --- a/packages/react-router-dom/index.tsx +++ b/packages/react-router-dom/index.tsx @@ -200,6 +200,7 @@ function isModifiedEvent(event: React.MouseEvent) { export interface LinkProps extends Omit, "href"> { + forceDocument?: boolean; replace?: boolean; state?: any; to: To; @@ -210,7 +211,7 @@ export interface LinkProps */ export const Link = React.forwardRef( function LinkWithRef( - { onClick, replace = false, state, target, to, ...rest }, + { onClick, forceDocument, replace = false, state, target, to, ...rest }, ref ) { let href = useHref(to); @@ -219,7 +220,7 @@ export const Link = React.forwardRef( event: React.MouseEvent ) { if (onClick) onClick(event); - if (!event.defaultPrevented) { + if (!event.defaultPrevented && !forceDocument) { internalOnClick(event); } } From 9e384051ee2fb2b49e7d64b2cc55c719ad6d7add Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Mon, 8 Nov 2021 13:58:46 -0800 Subject: [PATCH 2/4] renamed to reloadDocument --- packages/react-router-dom/__tests__/link-click-test.tsx | 4 ++-- packages/react-router-dom/index.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-router-dom/__tests__/link-click-test.tsx b/packages/react-router-dom/__tests__/link-click-test.tsx index 4ecbcb4eee..0b4878895d 100644 --- a/packages/react-router-dom/__tests__/link-click-test.tsx +++ b/packages/react-router-dom/__tests__/link-click-test.tsx @@ -62,13 +62,13 @@ describe("A click", () => { expect(h1?.textContent).toEqual("About"); }); - describe("when forceDocument specified", () => { + describe("when reloadDocument is specified", () => { it("does not prevent default", () => { function Home() { return (

Home

- + About
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx index 9b52433f05..eaa8a8ba9e 100644 --- a/packages/react-router-dom/index.tsx +++ b/packages/react-router-dom/index.tsx @@ -200,7 +200,7 @@ function isModifiedEvent(event: React.MouseEvent) { export interface LinkProps extends Omit, "href"> { - forceDocument?: boolean; + reloadDocument?: boolean; replace?: boolean; state?: any; to: To; @@ -211,7 +211,7 @@ export interface LinkProps */ export const Link = React.forwardRef( function LinkWithRef( - { onClick, forceDocument, replace = false, state, target, to, ...rest }, + { onClick, reloadDocument, replace = false, state, target, to, ...rest }, ref ) { let href = useHref(to); @@ -220,7 +220,7 @@ export const Link = React.forwardRef( event: React.MouseEvent ) { if (onClick) onClick(event); - if (!event.defaultPrevented && !forceDocument) { + if (!event.defaultPrevented && !reloadDocument) { internalOnClick(event); } } From cf466c5f0ced541340a2dbf38c663df6f4c08d3d Mon Sep 17 00:00:00 2001 From: Ryan Florence Date: Tue, 9 Nov 2021 07:30:24 -0700 Subject: [PATCH 3/4] chore(docs): added docs on reloadDocument --- docs/api.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/api.md b/docs/api.md index 2ce434c14a..070c8d0202 100644 --- a/docs/api.md +++ b/docs/api.md @@ -252,17 +252,17 @@ interface LinkProps "href" > { replace?: boolean; - state?: State; + state?: any; to: To; + reloadDocument?: boolean; } -type State = object | null; type To = Partial | string; ``` -A `` is an element that lets the user navigate to another page by clicking or tapping on it. In `react-router-dom`, a `` renders an accessible `` element with a real `href` that points to the resource it's linking to. This means that things like right-clicking a `` work as you'd expect. +A `` is an element that lets the user navigate to another page by clicking or tapping on it. In `react-router-dom`, a `` renders an accessible `` element with a real `href` that points to the resource it's linking to. This means that things like right-clicking a `` work as you'd expect. You can use `` to skip client side routing and let the browser handle the transitions normally (as if it were an ``).t ```tsx import * as React from "react"; From d4d1d19e795b2de7ceb1dbaf4b9ba738c84af78e Mon Sep 17 00:00:00 2001 From: Ryan Florence Date: Tue, 9 Nov 2021 07:31:20 -0700 Subject: [PATCH 4/4] chore(docs): typos --- docs/api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api.md b/docs/api.md index 070c8d0202..5834bb6bed 100644 --- a/docs/api.md +++ b/docs/api.md @@ -262,7 +262,7 @@ type To = Partial | string; -A `` is an element that lets the user navigate to another page by clicking or tapping on it. In `react-router-dom`, a `` renders an accessible `` element with a real `href` that points to the resource it's linking to. This means that things like right-clicking a `` work as you'd expect. You can use `` to skip client side routing and let the browser handle the transitions normally (as if it were an ``).t +A `` is an element that lets the user navigate to another page by clicking or tapping on it. In `react-router-dom`, a `` renders an accessible `` element with a real `href` that points to the resource it's linking to. This means that things like right-clicking a `` work as you'd expect. You can use `` to skip client side routing and let the browser handle the transition normally (as if it were an ``). ```tsx import * as React from "react";