diff --git a/packages/react-router-dom/.size-snapshot.json b/packages/react-router-dom/.size-snapshot.json
index f350e4a180..c2861f8018 100644
--- a/packages/react-router-dom/.size-snapshot.json
+++ b/packages/react-router-dom/.size-snapshot.json
@@ -1,26 +1,26 @@
 {
   "esm/react-router-dom.js": {
-    "bundled": 7978,
-    "minified": 4880,
-    "gzipped": 1618,
+    "bundled": 10547,
+    "minified": 6376,
+    "gzipped": 2040,
     "treeshaked": {
       "rollup": {
-        "code": 1250,
-        "import_statements": 417
+        "code": 1285,
+        "import_statements": 440
       },
       "webpack": {
-        "code": 3322
+        "code": 3336
       }
     }
   },
   "umd/react-router-dom.js": {
-    "bundled": 159709,
-    "minified": 57597,
-    "gzipped": 16540
+    "bundled": 162216,
+    "minified": 58840,
+    "gzipped": 16893
   },
   "umd/react-router-dom.min.js": {
-    "bundled": 97476,
-    "minified": 34651,
-    "gzipped": 10216
+    "bundled": 99449,
+    "minified": 35481,
+    "gzipped": 10400
   }
 }
diff --git a/packages/react-router-dom/docs/api/Focus.md b/packages/react-router-dom/docs/api/Focus.md
new file mode 100644
index 0000000000..c7504d5c82
--- /dev/null
+++ b/packages/react-router-dom/docs/api/Focus.md
@@ -0,0 +1,69 @@
+# &lt;Focus>
+
+Provides a way for an application to add [focus management](https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex#managing_focus_at_the_page_level) after navigation for better accessibility.
+
+```jsx
+import { Focus } from 'react-router-dom'
+
+<Focus>
+  {ref => (
+    <main tabIndex={-1} ref={ref}>
+      {/* ... */}
+    </main>
+  )}
+</Focus>
+```
+
+`Focus` uses a render prop to provide a `ref`. The `ref` should be passed to the element that will be focused.
+
+In order for `Focus` to work, the component type for the focused element needs to either be natively focusable (like an `<input>` or a `<button>`) or be given a `tabIndex` of `-1`. If you do not do this, then the document's `<body>` will be focused instead.
+
+Focusing a DOM element will give it an outline; you can style it with `outline: none;` to hide this outline.
+
+**Note:** Only the element that is passed the `ref` should have the `outline: none` style. A global `outline: none` rule should **not** be used because it will make your application inaccessible to users who navigate the page using their keyboard. You also should not use `outline: none` style if you are attaching the `ref` to a natively focusable element, like an `input`, `a`, or `button`.
+
+```jsx
+<Focus>
+  {ref => (
+    <main tabIndex={-1} ref={ref} style={{ outline: "none" }}>
+      {/* ... */}
+    </main>
+  )}
+</Focus>
+```
+
+## children: function
+
+The `children` function will be called with a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) and should return valid React elements.
+
+```jsx
+<Focus>
+  {ref => (
+    <main tabIndex={-1} ref={ref}>
+      {/* ... */}
+    </main>
+  )}
+</Focus>
+```
+
+## preserve: bool
+
+When `true`, if one of the focused element's children is already focused (e.g. uses `autofocus`), then the element will not steal the focus from the child. Defaults to `false`.
+
+```jsx
+<Focus preserve={true}>
+  {ref => ...}
+</Focus>
+```
+
+## preventScroll: bool
+
+When `true`, the application will not scroll to the element when it is focused. Defaults to `false`.
+
+**Note:** This is experimental functionality that does not work in all browsers.
+
+```jsx
+<Focus preventScroll={true}>
+  {ref => ...}
+</Focus>
+```
diff --git a/packages/react-router-dom/modules/Focus.js b/packages/react-router-dom/modules/Focus.js
new file mode 100644
index 0000000000..cee2a1a3a6
--- /dev/null
+++ b/packages/react-router-dom/modules/Focus.js
@@ -0,0 +1,73 @@
+import React from "react";
+import { __RouterContext as RouterContext } from "react-router";
+import warning from "tiny-warning";
+import PropTypes from "prop-types";
+import { locationsAreEqual } from "history";
+
+class FocusWithLocation extends React.Component {
+  setRef = element => {
+    this.eleToFocus = element;
+  };
+
+  componentDidMount() {
+    this.focus();
+  }
+
+  componentDidUpdate(prevProps) {
+    // only re-focus when the location changes
+    if (!locationsAreEqual(this.props.location, prevProps.location)) {
+      this.focus();
+    }
+  }
+
+  focus() {
+    const { preserve, preventScroll } = this.props;
+    // https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex#managing_focus_at_the_page_level
+    if (this.eleToFocus != null) {
+      warning(
+        this.eleToFocus.hasAttribute("tabIndex") ||
+          this.eleToFocus.tabIndex !== -1,
+        'The ref must be assigned an element with the "tabIndex" attribute or be focusable by default in order to be focused. ' +
+          "Otherwise, the document's <body> will be focused instead."
+      );
+
+      if (preserve && this.eleToFocus.contains(document.activeElement)) {
+        return;
+      }
+
+      setTimeout(() => {
+        this.eleToFocus.focus({ preventScroll });
+      });
+    } else {
+      warning(
+        false,
+        "There is no element to focus. Did you forget to add the ref to an element?"
+      );
+    }
+  }
+
+  render() {
+    const { children } = this.props;
+    return children(this.setRef);
+  }
+}
+
+const Focus = props => (
+  <RouterContext.Consumer>
+    {context => <FocusWithLocation location={context.location} {...props} />}
+  </RouterContext.Consumer>
+);
+
+Focus.defaultProps = {
+  preventScroll: false
+};
+
+if (__DEV__) {
+  Focus.propTypes = {
+    preventScroll: PropTypes.bool,
+    preserve: PropTypes.bool,
+    children: PropTypes.func
+  };
+}
+
+export default Focus;
diff --git a/packages/react-router-dom/modules/__tests__/Focus-test.js b/packages/react-router-dom/modules/__tests__/Focus-test.js
new file mode 100644
index 0000000000..e7faa31c18
--- /dev/null
+++ b/packages/react-router-dom/modules/__tests__/Focus-test.js
@@ -0,0 +1,439 @@
+import "jest";
+import React from "react";
+import ReactDOM from "react-dom";
+import { createMemoryHistory } from "history";
+import { MemoryRouter, Router, Switch, Route, Focus } from "react-router-dom";
+
+import renderStrict from "./utils/renderStrict";
+
+jest.useFakeTimers();
+
+describe("<Focus>", () => {
+  const node = document.createElement("div");
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(node);
+  });
+
+  describe("mounting", () => {
+    it("focuses ref component when mounting", () => {
+      renderStrict(
+        <MemoryRouter>
+          <Focus>
+            {ref => (
+              <div id="test" tabIndex={-1} ref={ref}>
+                Testing!
+              </div>
+            )}
+          </Focus>
+        </MemoryRouter>,
+        node
+      );
+
+      jest.runAllTimers();
+
+      const ref = node.querySelector("#test");
+      const focused = document.activeElement;
+      expect(focused).toBe(ref);
+    });
+
+    it("warns if ref isn't attached to an element (body focused)", () => {
+      jest.spyOn(console, "warn").mockImplementation(() => {});
+
+      renderStrict(
+        <MemoryRouter>
+          <Focus>{ref => null}</Focus>
+        </MemoryRouter>,
+        node
+      );
+
+      jest.runAllTimers();
+
+      expect(document.activeElement).toBe(document.body);
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledWith(
+        "There is no element to focus. Did you forget to add the ref to an element?"
+      );
+    });
+  });
+
+  describe("updates", () => {
+    it("when the location does NOT change, the ref is not re-focused", () => {
+      renderStrict(
+        <MemoryRouter>
+          <Focus>
+            {ref => (
+              <div id="test" tabIndex={-1} ref={ref}>
+                <input type="text" />
+              </div>
+            )}
+          </Focus>
+        </MemoryRouter>,
+        node
+      );
+
+      jest.runAllTimers();
+
+      const wrapper = node.querySelector("#test");
+      const initialFocus = document.activeElement;
+
+      expect(initialFocus).toBe(wrapper);
+
+      const input = node.querySelector("input");
+      // steal the focus
+      input.focus();
+      const stolenFocus = document.activeElement;
+      expect(stolenFocus).toBe(input);
+
+      // re-render
+      renderStrict(
+        <MemoryRouter>
+          <Focus>
+            {ref => (
+              <div id="test" tabIndex={-1} ref={ref}>
+                <input type="text" />
+              </div>
+            )}
+          </Focus>
+        </MemoryRouter>,
+        node
+      );
+
+      jest.runAllTimers();
+
+      expect(stolenFocus).toBe(input);
+    });
+
+    describe("new location", () => {
+      it("re-focuses ref when the location changes", () => {
+        const history = createMemoryHistory();
+        renderStrict(
+          <Router history={history}>
+            <Focus>
+              {ref => (
+                <div id="test" tabIndex={-1} ref={ref}>
+                  <input type="text" />
+                </div>
+              )}
+            </Focus>
+          </Router>,
+          node
+        );
+
+        jest.runAllTimers();
+
+        const input = node.querySelector("input");
+        const wrapper = input.parentElement;
+        const initialFocused = document.activeElement;
+
+        expect(wrapper).toBe(initialFocused);
+
+        // steal the focus
+        input.focus();
+        const stolenFocus = document.activeElement;
+        expect(input).toBe(stolenFocus);
+
+        history.push("/somewhere-else");
+
+        jest.runAllTimers();
+
+        const postNavFocus = document.activeElement;
+
+        expect(wrapper).toBe(postNavFocus);
+      });
+
+      it("focuses new ref for new locations", () => {
+        const Home = React.forwardRef((_, ref) => (
+          <div id="home" tabIndex={-1} ref={ref}>
+            <h1>Home</h1>
+          </div>
+        ));
+        const About = React.forwardRef((_, ref) => (
+          <div id="about" tabIndex={-1} ref={ref}>
+            <h1>About</h1>
+          </div>
+        ));
+
+        const history = createMemoryHistory();
+        renderStrict(
+          <Router history={history}>
+            <Focus>
+              {ref => (
+                <Switch>
+                  <Route
+                    path="/"
+                    exact
+                    render={match => <Home ref={ref} {...match} />}
+                  />
+                  <Route
+                    path="/about"
+                    render={match => <About ref={ref} {...match} />}
+                  />
+                </Switch>
+              )}
+            </Focus>
+          </Router>,
+          node
+        );
+
+        jest.runAllTimers();
+
+        const homeDiv = node.querySelector("#home");
+        expect(document.activeElement).toBe(homeDiv);
+
+        history.push("/about");
+
+        jest.runAllTimers();
+
+        const aboutDiv = node.querySelector("#about");
+        expect(document.activeElement).toBe(aboutDiv);
+      });
+
+      it("warns if ref isn't attached to an element (body focused)", () => {
+        jest.spyOn(console, "warn").mockImplementation(() => {});
+
+        const Home = ({ innerRef }) => (
+          <div id="home" tabIndex={-1} ref={innerRef}>
+            <h1>Home</h1>
+          </div>
+        );
+
+        const About = () => (
+          <div id="about">
+            <h1>About</h1>
+          </div>
+        );
+
+        const history = createMemoryHistory();
+        renderStrict(
+          <Router history={history}>
+            <Focus>
+              {ref => (
+                <Switch>
+                  <Route
+                    path="/"
+                    exact
+                    render={match => <Home innerRef={ref} {...match} />}
+                  />
+                  <Route path="/about" render={match => <About {...match} />} />
+                </Switch>
+              )}
+            </Focus>
+          </Router>,
+          node
+        );
+
+        jest.runAllTimers();
+
+        const homeDiv = node.querySelector("#home");
+        expect(document.activeElement).toBe(homeDiv);
+        expect(console.warn).toHaveBeenCalledTimes(0);
+
+        history.push("/about");
+
+        jest.runAllTimers();
+
+        expect(document.activeElement).toBe(document.body);
+        expect(console.warn).toHaveBeenCalledTimes(1);
+        expect(console.warn).toHaveBeenCalledWith(
+          "There is no element to focus. Did you forget to add the ref to an element?"
+        );
+      });
+    });
+  });
+
+  describe("preserve", () => {
+    describe("false (default)", () => {
+      it("re-focuses for new location re-renders", () => {
+        const history = createMemoryHistory();
+        renderStrict(
+          <Router history={history}>
+            <Focus>
+              {ref => (
+                <div id="test" tabIndex={-1} ref={ref}>
+                  <input type="text" />
+                </div>
+              )}
+            </Focus>
+          </Router>,
+          node
+        );
+
+        jest.runAllTimers();
+
+        const input = node.querySelector("input");
+        const wrapper = input.parentElement;
+        const initialFocused = document.activeElement;
+
+        expect(wrapper).toBe(initialFocused);
+
+        // steal the focus
+        input.focus();
+        const stolenFocus = document.activeElement;
+        expect(input).toBe(stolenFocus);
+
+        // navigate and verify wrapper is re-focused
+        history.push("/somewhere-else");
+
+        jest.runAllTimers();
+
+        const postNavFocus = document.activeElement;
+
+        expect(wrapper).toBe(postNavFocus);
+      });
+    });
+
+    describe("true", () => {
+      it("does not focus ref if something is already ", () => {
+        const history = createMemoryHistory();
+        renderStrict(
+          <Router history={history}>
+            <Focus preserve={true}>
+              {ref => (
+                <div id="test" tabIndex={-1} ref={ref}>
+                  <input type="text" />
+                </div>
+              )}
+            </Focus>
+          </Router>,
+          node
+        );
+
+        jest.runAllTimers();
+
+        const input = node.querySelector("input");
+        const wrapper = input.parentElement;
+        const initialFocused = document.activeElement;
+
+        expect(wrapper).toBe(initialFocused);
+
+        // steal the focus
+        input.focus();
+        const stolenFocus = document.activeElement;
+        expect(input).toBe(stolenFocus);
+
+        // navigate and verify wrapper is NOT re-focused
+        history.push("/somewhere-else");
+
+        jest.runAllTimers();
+
+        const postNavFocus = document.activeElement;
+
+        expect(postNavFocus).toBe(input);
+      });
+    });
+  });
+
+  describe("preventScroll", () => {
+    const realFocus = HTMLElement.prototype.focus;
+    let fakeFocus;
+
+    beforeEach(() => {
+      fakeFocus = HTMLElement.prototype.focus = jest.fn();
+    });
+
+    afterEach(() => {
+      fakeFocus.mockReset();
+      HTMLElement.prototype.focus = realFocus;
+    });
+
+    it("calls focus({ preventScroll: false }} when not provided", () => {
+      renderStrict(
+        <MemoryRouter>
+          <Focus>
+            {ref => (
+              <div id="test" tabIndex={-1} ref={ref}>
+                <input type="text" />
+              </div>
+            )}
+          </Focus>
+        </MemoryRouter>,
+        node
+      );
+      jest.runAllTimers();
+      expect(fakeFocus.mock.calls[0][0]).toMatchObject({
+        preventScroll: false
+      });
+    });
+
+    it("calls focus({ preventScroll: true }} when preventScroll = true", () => {
+      renderStrict(
+        <MemoryRouter>
+          <Focus preventScroll={true}>
+            {ref => (
+              <div id="test" tabIndex={-1} ref={ref}>
+                <input type="text" />
+              </div>
+            )}
+          </Focus>
+        </MemoryRouter>,
+        node
+      );
+      jest.runAllTimers();
+      expect(fakeFocus.mock.calls[0][0]).toMatchObject({ preventScroll: true });
+    });
+
+    it("calls focus({ preventScroll: false }} when preventScroll = false", () => {
+      renderStrict(
+        <MemoryRouter>
+          <Focus preventScroll={false}>
+            {ref => (
+              <div id="test" tabIndex={-1} ref={ref}>
+                <input type="text" />
+              </div>
+            )}
+          </Focus>
+        </MemoryRouter>,
+        node
+      );
+      jest.runAllTimers();
+      expect(fakeFocus.mock.calls[0][0]).toMatchObject({
+        preventScroll: false
+      });
+    });
+  });
+
+  describe("tabIndex", () => {
+    it("warns when ref element does not have a tabIndex attribute", () => {
+      jest.spyOn(console, "warn").mockImplementation(() => {});
+
+      renderStrict(
+        <MemoryRouter>
+          <Focus>
+            {ref => (
+              <div id="test" ref={ref}>
+                <input type="text" />
+              </div>
+            )}
+          </Focus>
+        </MemoryRouter>,
+        node
+      );
+
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledWith(
+        'The ref must be assigned an element with the "tabIndex" attribute or be focusable by default in order to be focused. ' +
+          "Otherwise, the document's <body> will be focused instead."
+      );
+    });
+
+    it("does not warn when ref element does not have a tabIndex attribute, but is already focusable", () => {
+      jest.spyOn(console, "warn").mockImplementation(() => {});
+
+      renderStrict(
+        <MemoryRouter>
+          <Focus>
+            {ref => (
+              <div id="test">
+                <input type="text" ref={ref} />
+              </div>
+            )}
+          </Focus>
+        </MemoryRouter>,
+        node
+      );
+
+      expect(console.warn).toHaveBeenCalledTimes(0);
+    });
+  });
+});
diff --git a/packages/react-router-dom/modules/index.js b/packages/react-router-dom/modules/index.js
index 8974420264..e9ecbd7ed8 100644
--- a/packages/react-router-dom/modules/index.js
+++ b/packages/react-router-dom/modules/index.js
@@ -4,3 +4,4 @@ export { default as BrowserRouter } from "./BrowserRouter";
 export { default as HashRouter } from "./HashRouter";
 export { default as Link } from "./Link";
 export { default as NavLink } from "./NavLink";
+export { default as Focus } from "./Focus";
