diff --git a/packages/react-router-dom/.size-snapshot.json b/packages/react-router-dom/.size-snapshot.json index a26291280..436514a24 100644 --- a/packages/react-router-dom/.size-snapshot.json +++ b/packages/react-router-dom/.size-snapshot.json @@ -1,8 +1,8 @@ { "esm/react-router-dom.js": { - "bundled": 8025, - "minified": 4824, - "gzipped": 1611, + "bundled": 8092, + "minified": 4881, + "gzipped": 1633, "treeshaked": { "rollup": { "code": 453, @@ -14,9 +14,9 @@ } }, "umd/react-router-dom.js": { - "bundled": 161252, - "minified": 57435, - "gzipped": 16465 + "bundled": 161325, + "minified": 57478, + "gzipped": 16483 }, "umd/react-router-dom.min.js": { "bundled": 97926, diff --git a/packages/react-router-dom/docs/api/Link.md b/packages/react-router-dom/docs/api/Link.md index 7850b886e..1026b4a10 100644 --- a/packages/react-router-dom/docs/api/Link.md +++ b/packages/react-router-dom/docs/api/Link.md @@ -56,6 +56,16 @@ const refCallback = node => { ``` +## innerRef: RefObject + +Get the underlying `ref` of the component with `React.createRef()` + +```jsx +const anchorRef = React.createRef() + + +``` + ## others You can also pass props you'd like to be on the `` such as a `title`, `id`, `className`, etc. diff --git a/packages/react-router-dom/modules/Link.js b/packages/react-router-dom/modules/Link.js index 367ef4ce9..5e5298b81 100644 --- a/packages/react-router-dom/modules/Link.js +++ b/packages/react-router-dom/modules/Link.js @@ -59,7 +59,11 @@ class Link extends React.Component { if (__DEV__) { const toType = PropTypes.oneOfType([PropTypes.string, PropTypes.object]); - const innerRefType = PropTypes.oneOfType([PropTypes.string, PropTypes.func]); + const innerRefType = PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.shape({ current: PropTypes.instanceOf(Element) }) + ]); Link.propTypes = { innerRef: innerRefType, diff --git a/packages/react-router-dom/modules/__tests__/Link-test.js b/packages/react-router-dom/modules/__tests__/Link-test.js index ae57190b3..d12c0b58d 100644 --- a/packages/react-router-dom/modules/__tests__/Link-test.js +++ b/packages/react-router-dom/modules/__tests__/Link-test.js @@ -91,7 +91,7 @@ describe("A ", () => { }); }); - it("exposes its ref via an innerRef prop", done => { + it("exposes its ref via an innerRef callback prop", done => { function refCallback(n) { if (n) { expect(n.tagName).toEqual("A"); @@ -109,6 +109,29 @@ describe("A ", () => { ); }); + it("exposes its ref via an innerRef RefObject prop", done => { + const refObject = { + get current() { + return null; + }, + set current(n) { + if (n) { + expect(n.tagName).toEqual("A"); + done(); + } + } + }; + + renderStrict( + + + link + + , + node + ); + }); + describe("with a ", () => { afterEach(() => { window.history.replaceState(null, "", "#");