diff --git a/packages/react-router-dom/docs/guides/basic-components.md b/packages/react-router-dom/docs/guides/basic-components.md
deleted file mode 100644
index 9437ce7ef4..0000000000
--- a/packages/react-router-dom/docs/guides/basic-components.md
+++ /dev/null
@@ -1,117 +0,0 @@
-# Basic Components
-
-There are three types of components in React Router: router components, route matching components, and navigation components.
-
-All of the components that you use in a web application should be imported from `react-router-dom`.
-
-```js
-import { BrowserRouter, Route, Link } from "react-router-dom";
-```
-
-## Routers
-
-At the core of every React Router application should be a router component. For web projects, `react-router-dom` provides `<BrowserRouter>` and `<HashRouter>` routers. Both of these will create a specialized `history` object for you. Generally speaking, you should use a `<BrowserRouter>` if you have a server that responds to requests and a `<HashRouter>` if you are using a static file server.
-
-```jsx
-import { BrowserRouter } from "react-router-dom";
-ReactDOM.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
-  holder
-);
-```
-
-## Route Matching
-
-There are two route matching components: `<Route>` and `<Switch>`.
-
-```js
-import { Route, Switch } from "react-router-dom";
-```
-
-Route matching is done by comparing a `<Route>`'s `path` prop to the current location's `pathname`. When a `<Route>` matches it will render its content and when it does not match, it will render `null`. A `<Route>` with no path will always match.
-
-```jsx
-// when location = { pathname: '/about' }
-<Route path='/about' component={About}/> // renders <About/>
-<Route path='/contact' component={Contact}/> // renders null
-<Route component={Always}/> // renders <Always/>
-```
-
-You can include a `<Route>` anywhere that you want to render content based on the location. It will often make sense to list a number of possible `<Route>`s next to each other. The `<Switch>` component is used to group `<Route>`s together.
-
-```jsx
-<Switch>
-  <Route exact path="/" component={Home} />
-  <Route path="/about" component={About} />
-  <Route path="/contact" component={Contact} />
-</Switch>
-```
-
-The `<Switch>` is not required for grouping `<Route>`s, but it can be quite useful. A `<Switch>` will iterate over all of its children `<Route>` elements and only render the first one that matches the current location. This helps when multiple route's paths match the same pathname, when animating transitions between routes, and in identifying when no routes match the current location (so that you can render a "404" component).
-
-```jsx
-<Switch>
-  <Route exact path="/" component={Home} />
-  <Route path="/about" component={About} />
-  <Route path="/contact" component={Contact} />
-  {/* when none of the above match, <NoMatch> will be rendered */}
-  <Route component={NoMatch} />
-</Switch>
-```
-
-## Route Rendering Props
-
-You have three prop choices for how you render a component for a given `<Route>`: `component`, `render`, and `children`. You can check out the [`<Route>` documentation](../api/Route.md) for more information on each one, but here we'll focus on `component` and `render` because those are the two you will almost always use.
-
-`component` should be used when you have an existing component (either a `React.Component` or a stateless functional component) that you want to render. `render`, which takes an inline function, should only be used when you have to pass in-scope variables to the component you want to render. You should **not** use the `component` prop with an inline function to pass in-scope variables because you will get undesired component unmounts/remounts.
-
-```jsx
-const Home = () => <div>Home</div>;
-
-const App = () => {
-  const someVariable = true;
-
-  return (
-    <Switch>
-      {/* these are good */}
-      <Route exact path="/" component={Home} />
-      <Route
-        path="/about"
-        render={props => <About {...props} extra={someVariable} />}
-      />
-      {/* do not do this */}
-      <Route
-        path="/contact"
-        component={props => <Contact {...props} extra={someVariable} />}
-      />
-    </Switch>
-  );
-};
-```
-
-## Navigation
-
-React Router provides a `<Link>` component to create links in your application. Wherever you render a `<Link>`, an anchor (`<a>`) will be rendered in your application's HTML.
-
-```jsx
-<Link to="/">Home</Link>
-// <a href='/'>Home</a>
-```
-
-The `<NavLink>` is a special type of `<Link>` that can style itself as "active" when its `to` prop matches the current location.
-
-```jsx
-// location = { pathname: '/react' }
-<NavLink to="/react" activeClassName="hurray">
-  React
-</NavLink>
-// <a href='/react' className='hurray'>React</a>
-```
-
-Any time that you want to force navigation, you can render a `<Redirect>`. When a `<Redirect>` renders, it will navigate using its `to` prop.
-
-```jsx
-<Redirect to="/login" />
-```
diff --git a/packages/react-router-dom/docs/guides/primary-components.md b/packages/react-router-dom/docs/guides/primary-components.md
new file mode 100644
index 0000000000..9fe29b1585
--- /dev/null
+++ b/packages/react-router-dom/docs/guides/primary-components.md
@@ -0,0 +1,127 @@
+# Primary Components
+
+There are three primary categories of components in React Router:
+
+- routers, like `<BrowserRouter>` and `<HashRouter>`
+- route matchers, like `<Route>` and `<Switch>`
+- and navigation, like `<Link>`, `<NavLink>`, and `<Redirect>`
+
+We also like to think of the navigation components as "route changers".
+
+All of the components that you use in a web application should be imported from `react-router-dom`.
+
+```js
+import { BrowserRouter, Route, Link } from "react-router-dom";
+```
+
+## Routers
+
+At the core of every React Router application should be a router component. For web projects, `react-router-dom` provides `<BrowserRouter>` and `<HashRouter>` routers. The main difference between the two is the way they store the URL and communicate with your web server.
+
+- A `<BrowserRouter>` uses regular URL paths. These are generally the best-looking URLs, but they require your server to be configured correctly. Specifically, your web server needs to serve the same page at all URLs that are managed client-side by React Router. Create React App supports this out of the box in development, and [comes with instructions](https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing) on how to configure your production server as well.
+- A `<HashRouter>` stores the current location in [the `hash` portion of the URL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash), so the URL looks something like `http://example.com/#/your/page`. Since the hash is never sent to the server, this means that no special server configuration is needed.
+
+To use a router, just make sure it is rendered at the root of your element hierarchy. Typically you'll wrap your top-level `<App>` element in a router, like this:
+
+```jsx
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+
+function App() {
+  return <h1>Hello React Router</h1>;
+}
+
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById("root")
+);
+```
+
+## Route Matchers
+
+There are two route matching components: `Switch` and `Route`. When a `<Switch>` is rendered, it searches through its `children` `<Route>` elements to find one whose `path` matches the current URL. When it finds one, it renders that `<Route>` and ignores all others. This means that you should put `<Route>`s with more specific (typically longer) `path`s **before** less-specific ones.
+
+If no `<Route>` matches, the `<Switch>` renders nothing (`null`).
+
+```jsx
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
+function App() {
+  return (
+    <div>
+      <Switch>
+        {/* If the current URL is /about, this route is rendered
+            while the rest are ignored */}
+        <Route path="/about">
+          <About />
+        </Route>
+
+        {/* Note how these two routes are ordered. The more specific
+            path="/contact/:id" comes before path="/contact" so that
+            route will render when viewing an individual contact */}
+        <Route path="/contact/:id">
+          <Contact />
+        </Route>
+        <Route path="/contact">
+          <AllContacts />
+        </Route>
+
+        {/* If none of the previous routes render anything,
+            this route acts as a fallback.
+
+            Important: A route with path="/" will *always* match
+            the URL because all URLs begin with a /. So that's
+            why we put this one last of all */}
+        <Route path="/">
+          <Home />
+        </Route>
+      </Switch>
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById("root")
+);
+```
+
+One important thing to note is that a `<Route path>` matches the **beginning** of the URL, not the whole thing. So a `<Route path="/">` will **always** match the URL. Because of this, we typically put this `<Route>` last in our `<Switch>`. Another possible solution is to use `<Route exact path="/">` which **does** match the entire URL.
+
+Note: Although React Router does support rendering `<Route>` elements outside of a `<Switch>`, as of version 5.1 we recommend you use [the `useRouteMatch` hook](#TODO) instead. Additionally, we do not recommend you render a `<Route>` without a `path` and instead suggest you use [a hook](#TODO) to get access to whatever variables you need.
+
+## Navigation (or Route Changers)
+
+React Router provides a `<Link>` component to create links in your application. Wherever you render a `<Link>`, an anchor (`<a>`) will be rendered in your HTML document.
+
+```jsx
+<Link to="/">Home</Link>
+// <a href="/">Home</a>
+```
+
+The `<NavLink>` is a special type of `<Link>` that can style itself as "active" when its `to` prop matches the current location.
+
+```jsx
+<NavLink to="/react" activeClassName="hurray">
+  React
+</NavLink>
+
+// When the URL is /react, this renders:
+// <a href="/react" className="hurray">React</a>
+
+// When it's something else:
+// <a href="/react">React</a>
+```
+
+Any time that you want to force navigation, you can render a `<Redirect>`. When a `<Redirect>` renders, it will navigate using its `to` prop.
+
+```jsx
+<Redirect to="/login" />
+```
diff --git a/packages/react-router-dom/docs/guides/quick-start.md b/packages/react-router-dom/docs/guides/quick-start.md
index cc5b270e1f..169a5f4177 100644
--- a/packages/react-router-dom/docs/guides/quick-start.md
+++ b/packages/react-router-dom/docs/guides/quick-start.md
@@ -1,10 +1,8 @@
 # Quick Start
 
-You'll need a React web app to add `react-router`.
+To get started with React Router in a web app, you'll need a React web app. If you need to create one, we recommend you try [Create React App](https://github.com/facebook/create-react-app). It's a popular tool that works really well with React Router.
 
-If you need to create one, the easiest way to get started is with a popular tool called [Create React App][crapp].
-
-First install `create-react-app`, if you don't already have it, and then make a new project with it.
+First, install `create-react-app` and make a new project with it.
 
 ```sh
 npm install -g create-react-app
@@ -14,25 +12,25 @@ cd demo-app
 
 ## Installation
 
-React Router DOM is [published to npm](https://npm.im/react-router-dom) so you can install it with either `npm` or [`yarn`](https://yarnpkg.com).
+You can install React Router from [the public npm registry](https://npm.im/react-router-dom) with either `npm` or [`yarn`](https://yarnpkg.com). Since we're building a web app, we'll use `react-router-dom` in this guide.
 
 ```sh
 npm install react-router-dom
 ```
 
-Copy/paste either of the examples (below) into your `src/App.js`.
+Next, copy/paste either of the following examples into `src/App.js`.
 
-## Example: Basic Routing
+## 1st Example: Basic Routing
 
-In this example we have 3 'Page' Components handled by the `<Router>`.
+In this example we have 3 "pages" handled by the router: a home page, an about page, and a users page. As you click around on the different `<Link>`s, the router renders the matching `<Route>`.
 
-Note: Instead of `<a href="/">` we use `<Link to="/">`.
+Note: Behind the scenes a `<Link>` renders an `<a>` with a real `href`, so people using the keyboard for navigation or screen readers will still be able to use this app.
 
 ```jsx
 import React from "react";
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 
-function Index() {
+function Home() {
   return <h2>Home</h2>;
 }
 
@@ -44,7 +42,7 @@ function Users() {
   return <h2>Users</h2>;
 }
 
-function AppRouter() {
+export default function App() {
   return (
     <Router>
       <div>
@@ -54,46 +52,40 @@ function AppRouter() {
               <Link to="/">Home</Link>
             </li>
             <li>
-              <Link to="/about/">About</Link>
+              <Link to="/about">About</Link>
             </li>
             <li>
-              <Link to="/users/">Users</Link>
+              <Link to="/users">Users</Link>
             </li>
           </ul>
         </nav>
 
-        <Route path="/" exact component={Index} />
-        <Route path="/about/" component={About} />
-        <Route path="/users/" component={Users} />
+        {/* A <Switch> looks through its children <Route>s and
+            renders the first one that matches the current URL. */}
+        <Switch>
+          <Route path="/about">
+            <About />
+          </Route>
+          <Route path="/users">
+            <Users />
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
       </div>
     </Router>
   );
 }
-
-export default AppRouter;
 ```
 
-## Example: Nested Routing
+## 2nd Example: Nested Routing
 
 This example shows how nested routing works. The route `/topics` loads the `Topics` component, which renders any further `<Route>`'s conditionally on the paths `:id` value.
 
 ```jsx
 import React from "react";
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
-
-function App() {
-  return (
-    <Router>
-      <div>
-        <Header />
-
-        <Route exact path="/" component={Home} />
-        <Route path="/about" component={About} />
-        <Route path="/topics" component={Topics} />
-      </div>
-    </Router>
-  );
-}
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 
 function Home() {
   return <h2>Home</h2>;
@@ -103,10 +95,6 @@ function About() {
   return <h2>About</h2>;
 }
 
-function Topic({ match }) {
-  return <h3>Requested Param: {match.params.id}</h3>;
-}
-
 function Topics({ match }) {
   return (
     <div>
@@ -121,17 +109,27 @@ function Topics({ match }) {
         </li>
       </ul>
 
-      <Route path={`${match.path}/:id`} component={Topic} />
-      <Route
-        exact
-        path={match.path}
-        render={() => <h3>Please select a topic.</h3>}
-      />
+      {/* The Topics page has its own <Switch> with more routes
+          that build on the /topics URL path. You can think of the
+          2nd <Route> here as an "index" page for all topics, or
+          the page that is shown when no topic is selected */}
+      <Switch>
+        <Route path={`${match.path}/:topicId`}>
+          <Topic />
+        </Route>
+        <Route path={match.path}>
+          <h3>Please select a topic.</h3>
+        </Route>
+      </Switch>
     </div>
   );
 }
 
-function Header() {
+function Topic({ match }) {
+  return <h3>Requested topic ID: {match.params.topicId}</h3>;
+}
+
+function Navigation() {
   return (
     <ul>
       <li>
@@ -147,9 +145,29 @@ function Header() {
   );
 }
 
-export default App;
+export default function App() {
+  return (
+    <Router>
+      <div>
+        <Navigation />
+
+        <Switch>
+          <Route path="/about">
+            <About />
+          </Route>
+          <Route path="/topics">
+            <Topics />
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  );
+}
 ```
 
-Now you're ready to tinker. Happy routing!
+## Keep Going!
 
-[crapp]: https://github.com/facebook/create-react-app
+Hopefully these examples give you a feel for what it's like to create a web app with React Router. Keep reading to learn more about [the primary components](primary-components.md) in React Router!
diff --git a/website/modules/docs/Web.js b/website/modules/docs/Web.js
index 397c21f850..b3ffec1528 100644
--- a/website/modules/docs/Web.js
+++ b/website/modules/docs/Web.js
@@ -109,13 +109,13 @@ export default {
 
   guides: [
     require("../../../packages/react-router-dom/docs/guides/quick-start.md"),
-    require("../../../packages/react-router-dom/docs/guides/basic-components.md"),
+    require("../../../packages/react-router-dom/docs/guides/primary-components.md"),
     require("../../../packages/react-router-dom/docs/guides/server-rendering.md"),
     require("../../../packages/react-router-dom/docs/guides/code-splitting.md"),
     require("../../../packages/react-router-dom/docs/guides/scroll-restoration.md"),
-    require("../../../packages/react-router/docs/guides/philosophy.md"),
+    require("../../../packages/react-router/docs/guides/philosophy.md?web"),
     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/redux.md?web"),
+    require("../../../packages/react-router/docs/guides/static-routes.md?web")
   ]
 };