From 65ca0ae07b33476f018b369d0f33852d645868c5 Mon Sep 17 00:00:00 2001
From: Brad Westfall <brad@azpixels.com>
Date: Fri, 22 Mar 2019 15:19:48 -0700
Subject: [PATCH 1/2] tour ad

---
 website/modules/base.css                      |  37 ++++
 .../modules/components/EnvironmentHeader.js   |  21 ++-
 .../modules/components/EnvironmentLarge.js    |   3 +
 website/modules/components/FakeBrowser.js     | 177 ------------------
 website/modules/components/HooksTourAd.js     |  19 ++
 website/modules/components/NativeExample.js   |  66 -------
 website/modules/components/WebExample.js      |  64 -------
 7 files changed, 79 insertions(+), 308 deletions(-)
 delete mode 100644 website/modules/components/FakeBrowser.js
 create mode 100644 website/modules/components/HooksTourAd.js
 delete mode 100644 website/modules/components/NativeExample.js
 delete mode 100644 website/modules/components/WebExample.js

diff --git a/website/modules/base.css b/website/modules/base.css
index 2c9e802e8f..a1adc98c83 100644
--- a/website/modules/base.css
+++ b/website/modules/base.css
@@ -258,3 +258,40 @@ h3 {
   opacity: 1;
   transition: opacity 250ms ease-in;
 }
+
+/* Just some temporary CSS for our hooks tour ad */
+
+.hooks-tour {
+  padding: 1.5em;
+  background-image: url(https://reacttraining.com/images/blue-fade.svg),
+    url(https://reacttraining.com/images/blue-fade.svg);
+  background-position: 50% 0, 0 -20%;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-color: #edf4f7;
+  border: 1px solid #d3dbde;
+  text-align: center;
+  border-radius: 0.5em;
+}
+
+.hooks-tour .logo {
+  width: 60%;
+}
+
+.hooks-tour a {
+  display: inline-block;
+  margin: 0.2em 0;
+  padding: 0.2em 0.5em;
+  background-color: #e94948;
+  color: #fff;
+  border-radius: 0.2em;
+}
+
+.hooks-tour hr {
+  border: none;
+  border-bottom: 1px solid #d3dbde;
+}
+
+.hooks-tour p:last-of-type {
+  font-size: 0.7em;
+}
diff --git a/website/modules/components/EnvironmentHeader.js b/website/modules/components/EnvironmentHeader.js
index e418d5ccf6..eb11568d0d 100644
--- a/website/modules/components/EnvironmentHeader.js
+++ b/website/modules/components/EnvironmentHeader.js
@@ -2,8 +2,9 @@ import React from "react";
 import { Link, Route } from "react-router-dom";
 import { Block, Row, Inline, Col } from "jsxstyle";
 import PropTypes from "prop-types";
+import Media from "react-media";
 
-import { LIGHT_GRAY, RED } from "../Theme";
+import { LIGHT_GRAY, RED, SMALL_SCREEN } from "../Theme";
 import Logo from "./Logo";
 
 function Tab({ to, ...rest }) {
@@ -82,6 +83,24 @@ function Branding() {
 function EnvironmentHeader() {
   return (
     <Block>
+      <Media query={SMALL_SCREEN}>
+        <Block
+          padding="1px"
+          backgroundColor={RED}
+          textAlign="center"
+          color="#fff"
+        >
+          <p>
+            <a
+              href="https://reacttraining.com"
+              style={{ textDecoration: "underline" }}
+            >
+              Attend a React Workshop
+            </a>{" "}
+            in a city near you this Spring!
+          </p>
+        </Block>
+      </Media>
       <Branding />
       <Tabs />
     </Block>
diff --git a/website/modules/components/EnvironmentLarge.js b/website/modules/components/EnvironmentLarge.js
index eb194bf5ba..ffc573ef1b 100644
--- a/website/modules/components/EnvironmentLarge.js
+++ b/website/modules/components/EnvironmentLarge.js
@@ -8,6 +8,7 @@ import EnvironmentHeader from "./EnvironmentHeader";
 import Example from "./Example";
 import Guide from "./Guide";
 import API from "./API";
+import HooksTourAd from "./HooksTourAd";
 
 class EnvironmentLarge extends Component {
   static propTypes = {
@@ -98,6 +99,8 @@ NavLink.propTypes = {
 function NavLinks({ data, environment }) {
   return (
     <Block lineHeight="1.8" padding="10px">
+      <HooksTourAd />
+
       {Array.isArray(data.examples) &&
         data.examples.length > 0 && (
           <Block>
diff --git a/website/modules/components/FakeBrowser.js b/website/modules/components/FakeBrowser.js
deleted file mode 100644
index 16ef64a5d3..0000000000
--- a/website/modules/components/FakeBrowser.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { Component } from "react";
-import { MemoryRouter, Route } from "react-router-dom";
-import { Block, Col, Row } from "jsxstyle";
-
-import { LIGHT_GRAY, GRAY } from "../Theme";
-
-function LeftArrowIcon(props) {
-  return (
-    <svg
-      {...props}
-      fill="currentColor"
-      viewBox="0 0 40 40"
-      preserveAspectRatio="xMidYMid meet"
-    >
-      <path d="m28.3 18.3h-12.6l3.8-3.8c0.7-0.6 0.7-1.7 0-2.3s-1.7-0.7-2.3 0l-7.9 7.8 7.9 7.8c0.3 0.4 0.7 0.5 1.1 0.5s0.9-0.1 1.2-0.5c0.7-0.6 0.7-1.7 0-2.3l-3.8-3.8h12.6c1 0 1.7-0.8 1.7-1.7s-0.8-1.7-1.7-1.7z" />
-    </svg>
-  );
-}
-
-function RightArrowIcon(props) {
-  return (
-    <svg
-      {...props}
-      fill="currentColor"
-      viewBox="0 0 40 40"
-      preserveAspectRatio="xMidYMid meet"
-    >
-      <path d="m22.2 12.2c-0.7 0.6-0.7 1.7 0 2.3l3.8 3.8h-12.7c-0.9 0-1.6 0.8-1.6 1.7s0.7 1.7 1.6 1.7h12.7l-3.8 3.8c-0.7 0.6-0.7 1.7 0 2.3 0.3 0.4 0.7 0.5 1.1 0.5s0.9-0.1 1.2-0.5l7.9-7.8-7.9-7.8c-0.6-0.7-1.7-0.7-2.3 0z" />
-    </svg>
-  );
-}
-
-function FileCodeIcon() {
-  return (
-    <svg
-      fill="currentColor"
-      height="1em"
-      width="1em"
-      viewBox="0 0 40 40"
-      preserveAspectRatio="xMidYMid meet"
-      style={{ verticalAlign: "middle" }}
-    >
-      <path d="m16.3 15l-6.3 6.3 6.3 6.2 2.5-2.5-3.8-3.7 3.8-3.8-2.5-2.5z m5 2.5l3.7 3.8-3.7 3.7 2.5 2.5 6.2-6.2-6.2-6.3-2.5 2.5z m6.2-15h-22.5v35h30v-27.5l-7.5-7.5z m5 32.5h-25v-30h17.5l7.5 7.5v22.5z" />
-    </svg>
-  );
-}
-
-function Button({ children, ...props }) {
-  return (
-    <Block
-      component="button"
-      display="inline-block"
-      border="none"
-      margin="0"
-      padding="0"
-      background="none"
-      fontSize="200%"
-      marginTop="-3px"
-      props={props}
-      children={children}
-      outline="none"
-      focusColor="hsl(200, 50%, 50%)"
-      activeTop="1px"
-      activeLeft="1px"
-      position={props.disabled ? "" : "relative"}
-    />
-  );
-}
-
-function getUserConfirmation(message, callback) {
-  callback(window.confirm(message));
-}
-
-function createPath(location) {
-  return location.pathname + location.search;
-}
-
-class FakeBrowser extends Component {
-  state = { url: null };
-
-  render() {
-    const { url } = this.state;
-    const { children, ...rest } = this.props;
-
-    return (
-      <MemoryRouter getUserConfirmation={getUserConfirmation}>
-        <Route
-          render={({ history, location }) => (
-            <Col
-              className="fake-browser"
-              background="white"
-              boxShadow="0px 5px 20px hsla(0, 0%, 0%, 0.75)"
-              borderRadius="6px"
-              {...rest}
-            >
-              <Row
-                background="#eee"
-                borderTopLeftRadius="6px"
-                borderTopRightRadius="6px"
-                border="none"
-                alignItems="center"
-                borderBottom="solid 1px #ccc"
-                padding="0 10px"
-              >
-                <Button onClick={history.goBack} disabled={!history.canGo(-1)}>
-                  <LeftArrowIcon
-                    height="1em"
-                    width="1em"
-                    style={{ verticalAlign: "middle", marginTop: -3 }}
-                  />
-                </Button>
-                <Button
-                  onClick={history.goForward}
-                  disabled={!history.canGo(1)}
-                >
-                  <RightArrowIcon
-                    height="1em"
-                    width="1em"
-                    style={{ verticalAlign: "middle", marginTop: -3 }}
-                  />
-                </Button>
-                <Block
-                  position="relative"
-                  zIndex="1"
-                  left="8px"
-                  top="-2px"
-                  color={GRAY}
-                >
-                  <FileCodeIcon />
-                </Block>
-                <Row
-                  flex="1"
-                  alignItems="center"
-                  padding="5px"
-                  marginLeft="-20px"
-                >
-                  <Block
-                    component="input"
-                    font="inherit"
-                    width="100%"
-                    paddingLeft="25px"
-                    color={LIGHT_GRAY}
-                    type="text"
-                    props={{
-                      value: url ? url : createPath(location),
-                      onChange: e => {
-                        this.setState({ url: e.target.value });
-                      },
-                      onKeyDown: e => {
-                        if (e.key === "Enter") {
-                          this.setState({ url: null });
-                          history.push(e.target.value);
-                        }
-                      }
-                    }}
-                  />
-                </Row>
-              </Row>
-              <Block
-                flex="1"
-                padding="20px"
-                overflow="auto"
-                position="relative"
-              >
-                {React.cloneElement(React.Children.only(children), {
-                  location
-                })}
-              </Block>
-            </Col>
-          )}
-        />
-      </MemoryRouter>
-    );
-  }
-}
-
-export default FakeBrowser;
diff --git a/website/modules/components/HooksTourAd.js b/website/modules/components/HooksTourAd.js
new file mode 100644
index 0000000000..945c383710
--- /dev/null
+++ b/website/modules/components/HooksTourAd.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+function HooksTourAdd() {
+  return (
+    <div className="hooks-tour">
+      <img
+        className="logo"
+        src="https://reacttraining.com/images/react-training-logo.svg"
+        alt="React Training Logo"
+      />
+      <p>Attend a React Workshop in a city near you this Spring!</p>
+      <a href="https://reacttraining.com/workshops/">View Schedule</a>
+      <hr />
+      <p>By the creators of React Router</p>
+    </div>
+  );
+}
+
+export default HooksTourAdd;
diff --git a/website/modules/components/NativeExample.js b/website/modules/components/NativeExample.js
deleted file mode 100644
index 7b5431e973..0000000000
--- a/website/modules/components/NativeExample.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-import Media from "react-media";
-import { Block, Col } from "jsxstyle";
-import PropTypes from "prop-types";
-
-import Bundle from "./Bundle";
-import SourceViewer from "./SourceViewer";
-import SmallScreen from "./SmallScreen";
-import Loading from "./Loading";
-
-function NativeExample({ example }) {
-  return (
-    <Bundle load={example.loadSource}>
-      {src =>
-        src ? (
-          <Media query="(min-width: 1170px)">
-            {largeScreen => (
-              <SmallScreen>
-                {smallScreen => (
-                  <Block
-                    minHeight="100vh"
-                    background="rgb(45, 45, 45)"
-                    padding="40px"
-                  >
-                    <Col
-                      position={largeScreen ? "fixed" : "static"}
-                      width={largeScreen ? "435px" : "auto"}
-                      left="290px"
-                      top="40px"
-                      bottom="40px"
-                    >
-                      {example.appetizeURL && (
-                        <iframe
-                          src={`${
-                            example.appetizeURL
-                          }?device=iphone6&scale=50&autoplay=false&orientation=portrait&deviceColor=white`}
-                          width="208px"
-                          height="435px"
-                          style={smallScreen ? { margin: "auto" } : null}
-                          frameBorder="0"
-                          scrolling="no"
-                        />
-                      )}
-                    </Col>
-                    <SourceViewer
-                      code={src}
-                      fontSize="11px"
-                      marginLeft={largeScreen ? "280px" : null}
-                      marginTop={largeScreen ? null : "40px"}
-                    />
-                  </Block>
-                )}
-              </SmallScreen>
-            )}
-          </Media>
-        ) : (
-          <Loading />
-        )
-      }
-    </Bundle>
-  );
-}
-
-NativeExample.propTypes = { example: PropTypes.object };
-
-export default NativeExample;
diff --git a/website/modules/components/WebExample.js b/website/modules/components/WebExample.js
deleted file mode 100644
index 46215ed0ad..0000000000
--- a/website/modules/components/WebExample.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import { Route } from "react-router-dom";
-import Media from "react-media";
-import { Block } from "jsxstyle";
-import PropTypes from "prop-types";
-
-import Bundle from "./Bundle";
-import FakeBrowser from "./FakeBrowser";
-import SourceViewer from "./SourceViewer";
-import Loading from "./Loading";
-
-function WebExample({ example }) {
-  return (
-    <Bundle load={example.load}>
-      {Example => (
-        <Bundle load={example.loadSource}>
-          {src =>
-            Example && src ? (
-              <Media query="(min-width: 1170px)">
-                {largeScreen => (
-                  <Block
-                    minHeight="100vh"
-                    background="rgb(45, 45, 45)"
-                    padding="40px"
-                  >
-                    <Route
-                      render={({ location }) => (
-                        <FakeBrowser
-                          key={location.key /*force new instance*/}
-                          position={largeScreen ? "fixed" : "static"}
-                          width={largeScreen ? "400px" : "auto"}
-                          height={largeScreen ? "auto" : "70vh"}
-                          left="290px"
-                          top="40px"
-                          bottom="40px"
-                        >
-                          <Example />
-                        </FakeBrowser>
-                      )}
-                    />
-                    <SourceViewer
-                      code={src}
-                      fontSize="11px"
-                      marginLeft={largeScreen ? "440px" : null}
-                      marginTop={largeScreen ? null : "40px"}
-                    />
-                  </Block>
-                )}
-              </Media>
-            ) : (
-              <Loading />
-            )
-          }
-        </Bundle>
-      )}
-    </Bundle>
-  );
-}
-
-WebExample.propTypes = {
-  example: PropTypes.object
-};
-
-export default WebExample;

From 97f0eee29509463f9166de9455b2fc8dcdc0b1c0 Mon Sep 17 00:00:00 2001
From: Brad Westfall <brad@azpixels.com>
Date: Wed, 15 May 2019 12:08:54 -0700
Subject: [PATCH 2/2] Removing "update blocking" content (#6652)

* update react and start using hooks in some places

* remove content for blocked updates
---
 FAQ.md                                        |   5 -
 packages/react-router/docs/api/withRouter.md  |  22 +-
 .../docs/guides/blocked-updates.md            | 200 ------------------
 website/modules/components/Bundle.js          |  38 ++--
 website/modules/components/Environment.js     |  98 ++++-----
 .../modules/components/EnvironmentLarge.js    |  55 +++--
 website/modules/docs/Core.js                  |   3 +-
 website/modules/docs/Native.js                |   3 +-
 website/modules/docs/Web.js                   |   3 +-
 website/package-lock.json                     |  25 +--
 website/package.json                          |  11 +
 11 files changed, 110 insertions(+), 353 deletions(-)
 delete mode 100644 packages/react-router/docs/guides/blocked-updates.md

diff --git a/FAQ.md b/FAQ.md
index 7e23f4912b..832b4d414e 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -4,16 +4,11 @@ This is a list of support questions that frequently show up in GitHub issues. Th
 
 If there is a support question that you frequently see being asked, please open a PR to add it to this list.
 
-- [Why aren't my components updating when the location changes?](#why-arent-my-components-updating-when-the-location-changes)
 - [Why doesn't my application render after refreshing?](#why-doesnt-my-application-render-after-refreshing)
 - [Why doesn't my application work when loading nested routes?](#why-doesnt-my-application-work-when-loading-nested-routes)
 - [How do I access the `history` object outside of components?](#how-do-i-access-the-history-object-outside-of-components)
 - [How do I pass props to the component rendered by a `<Route>`?](#how-do-i-pass-props-to-the-component-rendered-by-a-route)
 
-### Why aren't my components updating when the location changes?
-
-React Router relies on updates propagating from your router component to every child component. If you (or a component you use) implements `shouldComponentUpdate` or is a `React.PureComponent`, you may run into issues where your components do not update when the location changes. For a detailed review of the problem, please see the [blocked updates guide](packages/react-router/docs/guides/blocked-updates.md).
-
 ### Why doesn't my application render after refreshing?
 
 If your application is hosted on a static file server, you need to use a `<HashRouter>` instead of a `<BrowserRouter>`.
diff --git a/packages/react-router/docs/api/withRouter.md b/packages/react-router/docs/api/withRouter.md
index bfa2bdf35a..0c6ff14499 100644
--- a/packages/react-router/docs/api/withRouter.md
+++ b/packages/react-router/docs/api/withRouter.md
@@ -29,27 +29,7 @@ const ShowTheLocationWithRouter = withRouter(ShowTheLocation);
 
 #### Important Note
 
-`withRouter` does not subscribe to location changes like React Redux's `connect` does for state changes. Instead, re-renders after location changes propagate out from the `<Router>` component. This means that `withRouter` does _not_ re-render on route transitions unless its parent component re-renders. If you are using `withRouter` to prevent updates from being blocked by `shouldComponentUpdate`, it is important that `withRouter` wraps the component that implements `shouldComponentUpdate`. For example, when using Redux:
-
-```js
-// This gets around shouldComponentUpdate
-withRouter(connect(...)(MyComponent))
-// or
-compose(
-  withRouter,
-  connect(...)
-)(MyComponent)
-
-// This does not
-connect(...)(withRouter(MyComponent))
-// nor
-compose(
-  connect(...),
-  withRouter
-)(MyComponent)
-```
-
-See [this guide](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md) for more information.
+`withRouter` does not subscribe to location changes like React Redux's `connect` does for state changes. Instead, re-renders after location changes propagate out from the `<Router>` component. This means that `withRouter` does _not_ re-render on route transitions unless its parent component re-renders.
 
 #### Static Methods and Properties
 
diff --git a/packages/react-router/docs/guides/blocked-updates.md b/packages/react-router/docs/guides/blocked-updates.md
deleted file mode 100644
index 0123e4f827..0000000000
--- a/packages/react-router/docs/guides/blocked-updates.md
+++ /dev/null
@@ -1,200 +0,0 @@
-# Dealing with Update Blocking
-
-React Router has a number of location-aware components that use the current `location` object to determine what they render. By default, the current `location` is passed implicitly to components using React's context model. When the location changes, those components should re-render using the new `location` object from the context.
-
-React provides two approaches to optimize the rendering performance of applications: the `shouldComponentUpdate` lifecycle method and the `PureComponent`. Both block the re-rendering of components unless the right conditions are met. Unfortunately, this means that React Router's location-aware components can become out of sync with the current location if their re-rendering was prevented.
-
-### Example of the Problem
-
-We start out with a component that prevents updates.
-
-```js
-class UpdateBlocker extends React.PureComponent {
-  render() {
-    return (
-      <div>
-        <NavLink to="/about">About</NavLink>
-        <NavLink to="/faq">F.A.Q.</NavLink>
-      </div>
-    );
-  }
-}
-```
-
-When the `<UpdateBlocker>` is mounting, any location-aware child components will use the current `location` and `match` objects to render.
-
-```jsx
-// location = { pathname: '/about' }
-<UpdateBlocker />
-// <div>
-//   <a href='/about' class='active'>About</a>
-//   <a href='/faq'>F.A.Q.</a>
-// </div>
-```
-
-When the location changes, the `<UpdateBlocker>` does not detect any prop or state changes, so its child components will not be re-rendered.
-
-```jsx
-// location = { pathname: '/faq' }
-<UpdateBlocker />
-// the links will not re-render, so they retain their previous attributes
-// <div>
-//   <a href='/about' class='active'>About</a>
-//   <a href='/faq'>F.A.Q.</a>
-// </div>
-```
-
-### `shouldComponentUpdate`
-
-In order for a component that implements `shouldComponentUpdate` to know that it _should_ update when the location changes, its `shouldComponentUpdate` method needs to be able to detect location changes.
-
-If you are implementing `shouldComponentUpdate` yourself, you _could_ compare the location from the current and next `context.router` objects. However, as a user, you should not have to use context directly. Instead, it would be ideal if you could compare the current and next `location` without touching the context.
-
-#### Third-Party Code
-
-You may run into issues with components not updating after a location change despite not calling `shouldComponentUpdate` yourself. This is most likely because `shouldComponentUpdate` is being called by third-party code, such as `react-redux`'s `connect` and `mobx-react`'s `observer`.
-
-```js
-// react-redux
-const MyConnectedComponent = connect(mapStateToProps)(MyComponent);
-
-// mobx-react
-const MyObservedComponent = observer(MyComponent);
-```
-
-With third-party code, you likely cannot even control the implementation of `shouldComponentUpdate`. Instead, you will have to structure your code to make location changes obvious to those methods.
-
-Both `connect` and `observer` create components whose `shouldComponentUpdate` methods do a shallow comparison of their current `props` and their next `props`. Those components will only re-render when at least one prop has changed. This means that in order to ensure they update when the location changes, they will need to be given a prop that changes when the location changes.
-
-### `PureComponent`
-
-React's `PureComponent` does not implement `shouldComponentUpdate`, but it takes a similar approach to preventing updates. When a "pure" component updates, it will do a shallow comparison of its current `props` and `state` to the next `props` and `state`. If the comparison does not detect any differences, the component will not update. Like with `shouldComponentUpdate`, that means that in order to force a "pure" component to update when the location changes, it needs to have a prop or state that has changed.
-
-### The Solution
-
-#### Quick Solution
-
-If you are running into this issue while using a higher-order component like `connect` (from react-redux) or `observer` (from Mobx), you can just wrap that component in a `withRouter` to remove the blocked updates.
-
-```javascript
-// redux before
-const MyConnectedComponent = connect(mapStateToProps)(MyComponent);
-// redux after
-const MyConnectedComponent = withRouter(connect(mapStateToProps)(MyComponent));
-
-// mobx before
-const MyConnectedComponent = observer(MyComponent);
-// mobx after
-const MyConnectedComponent = withRouter(observer(MyComponent));
-```
-
-**This is not the most efficient solution**, but will prevent the blocked updates issue. For more info regarding this solution, read the [Redux guide](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/redux.md#blocked-updates). To understand why this is not the most optimal solution, read [this thread](https://github.com/ReactTraining/react-router/pull/5552#issuecomment-331502281).
-
-#### Recommended Solution
-
-The key to avoiding blocked re-renders after location changes is to pass the blocking component the `location` object as a prop. This will be different whenever the location changes, so comparisons will detect that the current and next location are different.
-
-```jsx
-// location = { pathname: '/about' }
-<UpdateBlocker location={location} />
-// <div>
-//   <a href='/about' class='active'>About</a>
-//   <a href='/faq'>F.A.Q.</a>
-// </div>
-
-// location = { pathname: '/faq' }
-<UpdateBlocker location={location} />
-// <div>
-//   <a href='/about'>About</a>
-//   <a href='/faq' class='active'>F.A.Q.</a>
-// </div>
-```
-
-#### Getting the location
-
-In order to pass the current `location` object as a prop to a component, you must have access to it. The primary way that a component can get access to the `location` is via a `<Route>` component. When a `<Route>` matches (or always if you are using the `children` prop), it passes the current `location` to the child element it renders.
-
-```jsx
-<Route path='/here' component={Here}/>
-const Here = (props) => {
-  // props.location = { pathname: '/here', ... }
-  return <div>You are here</div>
-}
-
-<Route path='/there' render={(props) => {
-  // props.location = { pathname: '/there', ... }
-  return <div>You are there</div>
-}}/>
-
-<Route path='/everywhere' children={(props) => {
-  // props.location = { pathname: '/everywhere', ... }
-  return <div>You are everywhere</div>
-}}/>
-```
-
-This means that given a component that blocks updates, you can easily pass it the `location` as a prop in the following ways:
-
-```jsx
-// the Blocker is a "pure" component, so it will only
-// update when it receives new props
-class Blocker extends React.PureComponent {
-  render() {
-    return (
-      <div>
-        <NavLink to="/oz">Oz</NavLink>
-        <NavLink to="/kansas">Kansas</NavLink>
-      </div>
-    );
-  }
-}
-```
-
-1. A component rendered directly by a `<Route>` does not have to worry about blocked updates because it has the `location` injected as a prop.
-
-```jsx
-// The <Blocker>'s location prop will change whenever
-// the location changes
-<Route path="/:place" component={Blocker} />
-```
-
-2. A component rendered directly by a `<Route>` can pass that location prop to any child elements it creates.
-
-```jsx
-<Route path="/parent" component={Parent} />;
-
-const Parent = props => {
-  // <Parent> receives the location as a prop. Any child
-  // element it creates can be passed the location.
-  return (
-    <SomeComponent>
-      <Blocker location={props.location} />
-    </SomeComponent>
-  );
-};
-```
-
-What happens when the component isn't being rendered by a `<Route>` and the component rendering it does not have the `location` in its variable scope? There are two approaches that you can take to automatically inject the `location` as a prop of your component.
-
-1. Render a pathless `<Route>`. While `<Route>`s are typically used for matching a specific path, a pathless `<Route>` will always match, so it will always render its component.
-
-```jsx
-// pathless <Route> = <Blocker> will always be rendered
-const MyComponent = () => (
-  <SomeComponent>
-    <Route component={Blocker} />
-  </SomeComponent>
-);
-```
-
-2. You can wrap a component with the `withRouter` higher-order component and it will be given the current `location` as one of its props.
-
-```jsx
-// internally, withRouter just renders a pathless <Route>
-const BlockAvoider = withRouter(Blocker);
-
-const MyComponent = () => (
-  <SomeComponent>
-    <BlockAvoider />
-  </SomeComponent>
-);
-```
diff --git a/website/modules/components/Bundle.js b/website/modules/components/Bundle.js
index ecc28b9608..8ffc880659 100644
--- a/website/modules/components/Bundle.js
+++ b/website/modules/components/Bundle.js
@@ -1,32 +1,18 @@
-import React, { Component } from "react";
+import { useState, useEffect } from "react";
 
-class Bundle extends Component {
-  state = {
-    mod: null
-  };
+function Bundle({ children, load }) {
+  const [mod, setMod] = useState();
 
-  componentWillMount() {
-    this.load(this.props);
-  }
+  useEffect(
+    () => {
+      load(mod => {
+        setMod(mod.default ? mod.default : mod);
+      });
+    },
+    [load]
+  );
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.load !== this.props.load) {
-      this.load(nextProps);
-    }
-  }
-
-  load(props) {
-    this.setState({
-      mod: null
-    });
-    props.load(mod => {
-      this.setState({ mod: mod.default ? mod.default : mod });
-    });
-  }
-
-  render() {
-    return this.props.children(this.state.mod);
-  }
+  return children(mod);
 }
 
 export default Bundle;
diff --git a/website/modules/components/Environment.js b/website/modules/components/Environment.js
index 3bdc01607f..a4d4b30a9c 100644
--- a/website/modules/components/Environment.js
+++ b/website/modules/components/Environment.js
@@ -1,6 +1,5 @@
-import React, { Component } from "react";
+import React, { useEffect } from "react";
 import { Redirect } from "react-router-dom";
-import { Block } from "jsxstyle";
 import PropTypes from "prop-types";
 
 import EnvironmentLarge from "./EnvironmentLarge";
@@ -15,63 +14,56 @@ const envData = {
   core: require("bundle-loader?lazy!../docs/Core")
 };
 
-class Environment extends Component {
-  static propTypes = {
-    location: PropTypes.object,
-    history: PropTypes.object,
-    match: PropTypes.shape({
-      params: PropTypes.shape({
-        environment: PropTypes.string
-      })
-    })
-  };
-
-  componentDidMount() {
-    this.preload();
+function Environment({
+  history,
+  location,
+  match,
+  match: {
+    params: { environment }
   }
-
-  preload() {
+}) {
+  useEffect(() => {
     Object.keys(envData).forEach(key => envData[key](() => {}));
-  }
+  }, []);
 
-  render() {
-    const {
-      history,
-      location,
-      match,
-      match: {
-        params: { environment }
-      }
-    } = this.props;
-    if (!envData[environment]) {
-      return <Redirect to="/" />;
-    } else {
-      return (
-        <SmallScreen>
-          {isSmallScreen => (
-            <Bundle name="Environment" load={envData[environment]}>
-              {data =>
-                data ? (
-                  isSmallScreen ? (
-                    <EnvironmentSmall
-                      data={data}
-                      match={match}
-                      location={location}
-                      history={history}
-                    />
-                  ) : (
-                    <EnvironmentLarge data={data} match={match} />
-                  )
+  if (!envData[environment]) {
+    return <Redirect to="/" />;
+  } else {
+    return (
+      <SmallScreen>
+        {isSmallScreen => (
+          <Bundle load={envData[environment]}>
+            {data =>
+              data ? (
+                isSmallScreen ? (
+                  <EnvironmentSmall
+                    data={data}
+                    match={match}
+                    location={location}
+                    history={history}
+                  />
                 ) : (
-                  <Loading />
+                  <EnvironmentLarge data={data} match={match} />
                 )
-              }
-            </Bundle>
-          )}
-        </SmallScreen>
-      );
-    }
+              ) : (
+                <Loading />
+              )
+            }
+          </Bundle>
+        )}
+      </SmallScreen>
+    );
   }
 }
 
+Environment.propTypes = {
+  location: PropTypes.object,
+  history: PropTypes.object,
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      environment: PropTypes.string
+    })
+  })
+};
+
 export default Environment;
diff --git a/website/modules/components/EnvironmentLarge.js b/website/modules/components/EnvironmentLarge.js
index ffc573ef1b..b60ada2cae 100644
--- a/website/modules/components/EnvironmentLarge.js
+++ b/website/modules/components/EnvironmentLarge.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Fragment, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Block, InlineBlock } from "jsxstyle";
 import { Link, Route, Redirect, Switch } from "react-router-dom";
@@ -10,37 +10,32 @@ import Guide from "./Guide";
 import API from "./API";
 import HooksTourAd from "./HooksTourAd";
 
-class EnvironmentLarge extends Component {
-  static propTypes = {
-    data: PropTypes.object,
-    match: PropTypes.object
-  };
-
-  componentDidMount() {
-    this.preloadExamples();
-  }
-
-  preloadExamples() {
-    const { data } = this.props;
-    data.examples.forEach(example => {
-      // native doesn't have `load`
-      if (example.load) example.load(() => {});
-      // all have `loadSource`
-      if (example.loadSource) example.loadSource(() => {});
-    });
-  }
-
-  render() {
-    const { data, match } = this.props;
-    return (
-      <Block>
-        <Nav data={data} environment={match.params.environment} />
-        <Content data={data} match={match} />
-      </Block>
-    );
-  }
+function EnvironmentLarge({ data, match }) {
+  useEffect(
+    () => {
+      data.examples.forEach(example => {
+        // native doesn't have `load`
+        if (example.load) example.load(() => {});
+        // all have `loadSource`
+        if (example.loadSource) example.loadSource(() => {});
+      });
+    },
+    [data]
+  );
+
+  return (
+    <Fragment>
+      <Nav data={data} environment={match.params.environment} />
+      <Content data={data} match={match} />
+    </Fragment>
+  );
 }
 
+EnvironmentLarge.propTypes = {
+  data: PropTypes.object,
+  match: PropTypes.object
+};
+
 function Title(props) {
   return (
     <Block
diff --git a/website/modules/docs/Core.js b/website/modules/docs/Core.js
index 0df1704488..b98d512816 100644
--- a/website/modules/docs/Core.js
+++ b/website/modules/docs/Core.js
@@ -20,7 +20,6 @@ export default {
     require("../../../packages/react-router/docs/guides/quick-start.md"),
     require("../../../packages/react-router/docs/guides/testing.md"),
     require("../../../packages/react-router/docs/guides/redux.md"),
-    require("../../../packages/react-router/docs/guides/static-routes.md"),
-    require("../../../packages/react-router/docs/guides/blocked-updates.md")
+    require("../../../packages/react-router/docs/guides/static-routes.md")
   ]
 };
diff --git a/website/modules/docs/Native.js b/website/modules/docs/Native.js
index 4c774cb4c8..cb26ab1ea5 100644
--- a/website/modules/docs/Native.js
+++ b/website/modules/docs/Native.js
@@ -83,7 +83,6 @@ export default {
     require("../../../packages/react-router-native/docs/guides/deep-linking.md"),
     require("../../../packages/react-router-native/docs/guides/animation.md"),
     require("../../../packages/react-router/docs/guides/philosophy.md"),
-    require("../../../packages/react-router/docs/guides/redux.md"),
-    require("../../../packages/react-router/docs/guides/blocked-updates.md")
+    require("../../../packages/react-router/docs/guides/redux.md")
   ]
 };
diff --git a/website/modules/docs/Web.js b/website/modules/docs/Web.js
index 353ea728c4..fe2e3563e9 100644
--- a/website/modules/docs/Web.js
+++ b/website/modules/docs/Web.js
@@ -27,8 +27,7 @@ export default {
     require("../../../packages/react-router/docs/guides/philosophy.md"),
     require("../../../packages/react-router/docs/guides/testing.md?web"),
     require("../../../packages/react-router/docs/guides/redux.md"),
-    require("../../../packages/react-router/docs/guides/static-routes.md"),
-    require("../../../packages/react-router/docs/guides/blocked-updates.md")
+    require("../../../packages/react-router/docs/guides/static-routes.md")
   ],
 
   examples: [
diff --git a/website/package-lock.json b/website/package-lock.json
index 63bb08e982..219b546655 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -8143,14 +8143,14 @@
 			}
 		},
 		"react": {
-			"version": "16.5.2",
-			"resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
-			"integrity": "sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==",
+			"version": "16.8.4",
+			"resolved": "https://registry.npmjs.org/react/-/react-16.8.4.tgz",
+			"integrity": "sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==",
 			"requires": {
 				"loose-envify": "^1.1.0",
 				"object-assign": "^4.1.1",
 				"prop-types": "^15.6.2",
-				"schedule": "^0.5.0"
+				"scheduler": "^0.13.4"
 			}
 		},
 		"react-codesandboxer": {
@@ -8168,14 +8168,14 @@
 			"integrity": "sha1-TA4wXfTMNfD1/S1lp5IUyLAS2zU="
 		},
 		"react-dom": {
-			"version": "16.5.2",
-			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.2.tgz",
-			"integrity": "sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==",
+			"version": "16.8.4",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.4.tgz",
+			"integrity": "sha512-Ob2wK7XG2tUDt7ps7LtLzGYYB6DXMCLj0G5fO6WeEICtT4/HdpOi7W/xLzZnR6RCG1tYza60nMdqtxzA8FaPJQ==",
 			"requires": {
 				"loose-envify": "^1.1.0",
 				"object-assign": "^4.1.1",
 				"prop-types": "^15.6.2",
-				"schedule": "^0.5.0"
+				"scheduler": "^0.13.4"
 			}
 		},
 		"react-icon-base": {
@@ -8678,11 +8678,12 @@
 			"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
 			"dev": true
 		},
-		"schedule": {
-			"version": "0.5.0",
-			"resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
-			"integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==",
+		"scheduler": {
+			"version": "0.13.4",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.4.tgz",
+			"integrity": "sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==",
 			"requires": {
+				"loose-envify": "^1.1.0",
 				"object-assign": "^4.1.1"
 			}
 		},
diff --git a/website/package.json b/website/package.json
index 76b2f39a3f..bcae3053c2 100644
--- a/website/package.json
+++ b/website/package.json
@@ -49,7 +49,18 @@
     "markdown-it": "^7.0.0",
     "postcss-loader": "^2.1.5",
     "prismjs": "^1.8.4",
+    "prop-types": "^15.6.1",
+    "query-string": "^5.1.0",
     "raw-loader": "^0.5.1",
+    "react": "^16.8.4",
+    "react-css-property-operations": "^15.4.1",
+    "react-dom": "^16.8.4",
+    "react-icons": "^2.2.7",
+    "react-media": "^1.6.1",
+    "react-motion": "^0.5.2",
+    "react-transition-group": "^2.2.1",
+    "resolve-pathname": "^2.2.0",
+    "slug": "^1.0.0",
     "style-loader": "^0.19.0",
     "sw-precache": "^4.2.2",
     "sw-precache-webpack-plugin": "^0.11.5",