Update examples and docs to use hooks API (remix-run#6976)

Author: mjackson

packages/react-router-dom/docs/.prettierrc

@@ -0,0 +1 @@
+printWidth: 70 

packages/react-router-dom/docs/api/BrowserRouter.md

@@ -3,15 +3,13 @@
 A [`<Router>`](../../../react-router/docs/api/Router.md) that uses the HTML5 history API (`pushState`, `replaceState` and the `popstate` event) to keep your UI in sync with the URL.
 
 ```jsx
-import { BrowserRouter } from 'react-router-dom'
-
 <BrowserRouter
   basename={optionalString}
   forceRefresh={optionalBool}
   getUserConfirmation={optionalFunc}
   keyLength={optionalNumber}
 >
-  <App/>
+  <App />
 </BrowserRouter>
 ```
 
@@ -29,22 +27,21 @@ The base URL for all locations. If your app is served from a sub-directory on yo
 A function to use to confirm navigation. Defaults to using [`window.confirm`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm).
 
 ```jsx
-// this is the default behavior
-function getConfirmation(message, callback) {
-  const allowTransition = window.confirm(message);
-  callback(allowTransition);
-}
-
-<BrowserRouter getUserConfirmation={getConfirmation} />;
+<BrowserRouter
+  getUserConfirmation={(message, callback) => {
+    // this is the default behavior
+    const allowTransition = window.confirm(message);
+    callback(allowTransition);
+  }}
+/>
 ```
 
 ## forceRefresh: bool
 
-If `true` the router will use full page refreshes on page navigation. You probably only want this in [browsers that don't support the HTML5 history API](http://caniuse.com/#feat=history).
+If `true` the router will use full page refreshes on page navigation. You may want to use this to imitate the way a traditional server-rendered app would work with full page refreshes between page navigation.
 
 ```jsx
-const supportsHistory = 'pushState' in window.history
-<BrowserRouter forceRefresh={!supportsHistory} />
+<BrowserRouter forceRefresh={true} />
 ```
 
 ## keyLength: number
@@ -57,4 +54,6 @@ The length of `location.key`. Defaults to 6.
 
 ## children: node
 
-A [single child element](https://facebook.github.io/react/docs/react-api.html#reactchildrenonly) to render.
+The child elements to render.
+
+Note: On React &lt; 16 you must use a [single child element](https://facebook.github.io/react/docs/react-api.html#reactchildrenonly) since a render method cannot return more than one element. If you need more than one element, you might try wrapping them in an extra `<div>`.

packages/react-router-dom/docs/api/HashRouter.md

@@ -5,10 +5,12 @@ A [`<Router>`](../../../react-router/docs/api/Router.md) that uses the hash port
 **IMPORTANT NOTE:** Hash history does not support `location.key` or `location.state`. In previous versions we attempted to shim the behavior but there were edge-cases we couldn't solve. Any code or plugin that needs this behavior won't work. As this technique is only intended to support legacy browsers, we encourage you to configure your server to work with `<BrowserHistory>` instead.
 
 ```jsx
-import { HashRouter } from 'react-router-dom'
-
-<HashRouter>
-  <App/>
+<HashRouter
+  basename={optionalString}
+  getUserConfirmation={optionalFunc}
+  hashType={optionalString}
+>
+  <App />
 </HashRouter>
 ```
 
@@ -26,13 +28,13 @@ The base URL for all locations. A properly formatted basename should have a lead
 A function to use to confirm navigation. Defaults to using [`window.confirm`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm).
 
 ```jsx
-// this is the default behavior
-function getConfirmation(message, callback) {
-  const allowTransition = window.confirm(message);
-  callback(allowTransition);
-}
-
-<HashRouter getUserConfirmation={getConfirmation} />;
+<HashRouter
+  getUserConfirmation={(message, callback) => {
+    // this is the default behavior
+    const allowTransition = window.confirm(message);
+    callback(allowTransition);
+  }}
+/>
 ```
 
 ## hashType: string

packages/react-router-dom/docs/api/Link.md

@@ -3,8 +3,6 @@
 Provides declarative, accessible navigation around your application.
 
 ```jsx
-import { Link } from 'react-router-dom'
-
 <Link to="/about">About</Link>
 ```
 
@@ -58,22 +56,28 @@ When `true`, clicking the link will replace the current entry in the history sta
 
 ## innerRef: function
 
-Allows access to the underlying `ref` of the component
+As of React Router 5.1, if you are using React 16 you should not need this prop because we [forward the ref](https://reactjs.org/docs/forwarding-refs.html) to the underlying `<a>`. Use a normal `ref` instead.
 
-```jsx
-const refCallback = node => {
-  // `node` refers to the mounted DOM element or null when unmounted
-}
+Allows access to the underlying `ref` of the component.
 
-<Link to="/" innerRef={refCallback} />
+```jsx
+<Link
+  to="/"
+  innerRef={node => {
+    // `node` refers to the mounted DOM element
+    // or null when unmounted
+  }}
+/>
 ```
 
 ## innerRef: RefObject
 
-Get the underlying `ref` of the component with `React.createRef()`
+As of React Router 5.1, if you are using React 16 you should not need this prop because we [forward the ref](https://reactjs.org/docs/forwarding-refs.html) to the underlying `<a>`. Use a normal `ref` instead.
+
+Get the underlying `ref` of the component using [`React.createRef`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs).
 
 ```jsx
-const anchorRef = React.createRef()
+let anchorRef = React.createRef()
 
 <Link to="/" innerRef={anchorRef} />
 ```

packages/react-router-dom/docs/api/NavLink.md

@@ -3,8 +3,6 @@
 A special version of the [`<Link>`](Link.md) that will add styling attributes to the rendered element when it matches the current URL.
 
 ```jsx
-import { NavLink } from 'react-router-dom'
-
 <NavLink to="/about">About</NavLink>
 ```
 
@@ -59,19 +57,20 @@ When `true`, the trailing slash on a location's `pathname` will be taken into co
 A function to add extra logic for determining whether the link is active. This should be used if you want to do more than verify that the link's pathname matches the current URL's `pathname`.
 
 ```jsx
-// only consider an event active if its event id is an odd number
-const oddEvent = (match, location) => {
-  if (!match) {
-    return false
-  }
-  const eventID = parseInt(match.params.eventID)
-  return !isNaN(eventID) && eventID % 2 === 1
-}
-
 <NavLink
   to="/events/123"
-  isActive={oddEvent}
->Event 123</NavLink>
+  isActive={(match, location) => {
+    if (!match) {
+      return false;
+    }
+
+    // only consider an event active if its event id is an odd number
+    const eventID = parseInt(match.params.eventID);
+    return !isNaN(eventID) && eventID % 2 === 1;
+  }}
+>
+  Event 123
+</NavLink>
 ```
 
 ## location: object

packages/react-router-dom/docs/guides/code-splitting.md

@@ -14,12 +14,12 @@ One great feature of the web is that we don't have to make our visitors download
 [`loadable-components`] is a library for loading components with dynamic imports. It handles all sorts of edge cases automatically and makes code splitting simple! Here's an example of how to use [`loadable-components`]:
 
 ```jsx
-import loadable from '@loadable/component'
-import Loading from "./Loading";
+import loadable from "@loadable/component";
+import Loading from "./Loading.js";
 
-const LoadableComponent = loadable(() => import('./Dashboard'), {
-  fallback: <Loading />,
-})
+const LoadableComponent = loadable(() => import("./Dashboard.js"), {
+  fallback: <Loading />
+});
 
 export default class LoadableDashboard extends React.Component {
   render() {
@@ -37,7 +37,7 @@ Full documentation is available [here](https://www.smooth-code.com/open-source/l
 [`loadable-components`] includes [a guide for server-side rendering][ssr].
 
 [babel]: https://babeljs.io/
-[`@babel/preset-react`]:  https://babeljs.io/docs/en/babel-preset-react
+[`@babel/preset-react`]: https://babeljs.io/docs/en/babel-preset-react
 [`@babel/plugin-syntax-dynamic-import`]: https://babeljs.io/docs/plugins/syntax-dynamic-import/
 [`babel-plugin-import-inspector`]: https://github.com/thejameskyle/react-loadable/tree/6902cc87f618446c54daa85d8fecec6836c9461a#babel-plugin-import-inspector
 [`loadable-components`]: https://github.com/smooth-code/loadable-components

packages/react-router-dom/docs/guides/primary-components.md

@@ -49,7 +49,11 @@ 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";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route
+} from "react-router-dom";
 
 function App() {
   return (

packages/react-router-dom/docs/guides/quick-start.md

@@ -28,19 +28,12 @@ Note: Behind the scenes a `<Link>` renders an `<a>` with a real `href`, so peopl
 
 ```jsx
 import React from "react";
-import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
-
-function Home() {
-  return <h2>Home</h2>;
-}
-
-function About() {
-  return <h2>About</h2>;
-}
-
-function Users() {
-  return <h2>Users</h2>;
-}
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
 
 export default function App() {
   return (
@@ -77,6 +70,18 @@ export default function App() {
     </Router>
   );
 }
+
+function Home() {
+  return <h2>Home</h2>;
+}
+
+function About() {
+  return <h2>About</h2>;
+}
+
+function Users() {
+  return <h2>Users</h2>;
+}
 ```
 
 ## 2nd Example: Nested Routing
@@ -85,7 +90,46 @@ This example shows how nested routing works. The route `/topics` loads the `Topi
 
 ```jsx
 import React from "react";
-import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link,
+  useRouterMatch,
+  useParams
+} from "react-router-dom";
+
+export default function App() {
+  return (
+    <Router>
+      <div>
+        <ul>
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/about">About</Link>
+          </li>
+          <li>
+            <Link to="/topics">Topics</Link>
+          </li>
+        </ul>
+
+        <Switch>
+          <Route path="/about">
+            <About />
+          </Route>
+          <Route path="/topics">
+            <Topics />
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  );
+}
 
 function Home() {
   return <h2>Home</h2>;
@@ -95,7 +139,9 @@ function About() {
   return <h2>About</h2>;
 }
 
-function Topics({ match }) {
+function Topics() {
+  let match = useRouterMatch();
+
   return (
     <div>
       <h2>Topics</h2>
@@ -105,7 +151,9 @@ function Topics({ match }) {
           <Link to={`${match.url}/components`}>Components</Link>
         </li>
         <li>
-          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
+          <Link to={`${match.url}/props-v-state`}>
+            Props v. State
+          </Link>
         </li>
       </ul>
 
@@ -125,40 +173,9 @@ function Topics({ match }) {
   );
 }
 
-function Topic({ match }) {
-  return <h3>Requested topic ID: {match.params.topicId}</h3>;
-}
-
-function Navigation() {
-  return (
-    <ul>
-      <li>
-        <Link to="/">Home</Link>
-      </li>
-      <li>
-        <Link to="/about">About</Link>
-      </li>
-      <li>
-        <Link to="/topics">Topics</Link>
-      </li>
-    </ul>
-  );
-}
-
-export default function App() {
-  return (
-    <Router>
-      <div>
-        <Navigation />
-
-        <Switch>
-          <Route path="/about" component={About} />
-          <Route path="/topics" component={Topics} />
-          <Route path="/" component={Home} />
-        </Switch>
-      </div>
-    </Router>
-  );
+function Topic() {
+  let { topicId } = useParams();
+  return <h3>Requested topic ID: {topicId}</h3>;
 }
 ```