Docs - Replace use of deprecated lifecycle methods with the methods r…

packages/react-router-config/README.md

@@ -4,8 +4,8 @@ Static route configuration helpers for React Router.
 
 This is alpha software, it needs:
 
-1. Realistic server rendering example with data preloading
-2. Pending navigation example
+1.  Realistic server rendering example with data preloading
+2.  Pending navigation example
 
 ## Installation
 
@@ -17,10 +17,10 @@ Then with a module bundler like [webpack](https://webpack.github.io/), use as yo
 
 ```js
 // using an ES6 transpiler, like babel
-import { matchRoutes, renderRoutes } from 'react-router-config'
+import { matchRoutes, renderRoutes } from 'react-router-config';
 
 // not using an ES6 transpiler
-var matchRoutes = require('react-router-config').matchRoutes
+var matchRoutes = require('react-router-config').matchRoutes;
 ```
 
 The UMD build is also available on [unpkg](https://unpkg.com):
@@ -35,40 +35,44 @@ You can find the library on `window.ReactRouterConfig`
 
 With the introduction of React Router v4, there is no longer a centralized route configuration. There are some use-cases where it is valuable to know about all the app's potential routes such as:
 
-- Loading data on the server or in the lifecycle before rendering the next screen
-- Linking to routes by name
-- Static analysis
+* Loading data on the server or in the lifecycle before rendering the next screen
+* Linking to routes by name
+* Static analysis
 
 This project seeks to define a shared format for others to build patterns on top of.
 
 ## Route Configuration Shape
 
 Routes are objects with the same properties as a `<Route>` with a couple differences:
 
-- the only render prop it accepts is `component` (no `render` or `children`)
-- introduces the `routes` key for sub routes
-- Consumers are free to add any additional props they'd like to a route, you can access `props.route` inside the `component`, this object is a reference to the object used to render and match.
-- accepts `key` prop to prevent remounting component when transition was made from route with the same component and same `key` prop
+* the only render prop it accepts is `component` (no `render` or `children`)
+* introduces the `routes` key for sub routes
+* Consumers are free to add any additional props they'd like to a route, you can access `props.route` inside the `component`, this object is a reference to the object used to render and match.
+* accepts `key` prop to prevent remounting component when transition was made from route with the same component and same `key` prop
 
 ```js
 const routes = [
-  { component: Root,
+  {
+    component: Root,
     routes: [
-      { path: '/',
+      {
+        path: '/',
         exact: true,
         component: Home
       },
-      { path: '/child/:id',
+      {
+        path: '/child/:id',
         component: Child,
         routes: [
-          { path: '/child/:id/grand-child',
+          {
+            path: '/child/:id/grand-child',
             component: GrandChild
           }
         ]
       }
     ]
   }
-]
+];
 ```
 
 **Note**: Just like `<Route>`, relative paths are not (yet) supported. When it is supported there, it will be supported here.
@@ -80,12 +84,13 @@ const routes = [
 Returns an array of matched routes.
 
 #### Parameters
-- routes - the route configuration
-- pathname - the [pathname](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname) component of the url. This must be a decoded string representing the path.
+
+* routes - the route configuration
+* pathname - the [pathname](https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname) component of the url. This must be a decoded string representing the path.
 
 ```js
-import { matchRoutes } from 'react-router-config'
-const branch = matchRoutes(routes, '/child/23')
+import { matchRoutes } from 'react-router-config';
+const branch = matchRoutes(routes, '/child/23');
 // using the routes shown earlier, this returns
 // [
 //   routes[0],
@@ -95,12 +100,12 @@ const branch = matchRoutes(routes, '/child/23')
 
 Each item in the array contains two properties: `routes` and `match`.
 
-- `routes`: A reference to the routes array used to match
-- `match`: The match object that also gets passed to `<Route>` render methods.
+* `routes`: A reference to the routes array used to match
+* `match`: The match object that also gets passed to `<Route>` render methods.
 
 ```js
-branch[0].match.url
-branch[0].match.isExact
+branch[0].match.url;
+branch[0].match.isExact;
 // etc.
 ```
 
@@ -134,18 +139,18 @@ class PendingNavDataLoader extends Component {
     previousLocation: null
   }
 
-  componentWillReceiveProps(nextProps) {
-    const navigated = nextProps.location !== this.props.location
+  componentDidUpdate(prevProps) {
+    const navigated = prevProps.location !== this.props.location
     const { routes } = this.props
 
     if (navigated) {
       // save the location so we can render the old screen
       this.setState({
-        previousLocation: this.props.location
+        previousLocation: prevProps.location
       })
 
       // load data while the old screen remains
-      loadNextData(routes, nextProps.location).then((data) => {
+      loadNextData(routes, this.props.location).then((data) => {
         putTheDataSomewhereRoutesCanFindIt(data)
         // clear previousLocation so the next screen renders
         this.setState({
@@ -191,63 +196,65 @@ Again, that's all pseudo-code. There are a lot of ways to do server rendering wi
 In order to ensure that matching outside of render with `matchRoutes` and inside of render result in the same branch, you must use `renderRoutes` instead of `<Route>` inside your components. You can render a `<Route>` still, but know that it will not be accounted for in `matchRoutes` outside of render.
 
 ```js
-import { renderRoutes } from 'react-router-config'
+import { renderRoutes } from 'react-router-config';
 
 const routes = [
-  { component: Root,
+  {
+    component: Root,
     routes: [
-      { path: '/',
+      {
+        path: '/',
         exact: true,
         component: Home
       },
-      { path: '/child/:id',
+      {
+        path: '/child/:id',
         component: Child,
         routes: [
-          { path: '/child/:id/grand-child',
+          {
+            path: '/child/:id/grand-child',
             component: GrandChild
           }
         ]
       }
     ]
   }
-]
+];
 
 const Root = ({ route }) => (
   <div>
     <h1>Root</h1>
     {/* child routes won't render without this */}
     {renderRoutes(route.routes)}
   </div>
-)
+);
 
 const Home = ({ route }) => (
   <div>
     <h2>Home</h2>
   </div>
-)
+);
 
 const Child = ({ route }) => (
   <div>
     <h2>Child</h2>
     {/* child routes won't render without this */}
     {renderRoutes(route.routes, { someProp: 'these extra props are optional' })}
   </div>
-)
+);
 
 const GrandChild = ({ someProp }) => (
   <div>
     <h3>Grand Child</h3>
     <div>{someProp}</div>
   </div>
-)
-
+);
 
-ReactDOM.render((
+ReactDOM.render(
   <BrowserRouter>
     {/* kick it all off with the root route */}
     {renderRoutes(routes)}
-  </BrowserRouter>
-), document.getElementById('root'))
-
+  </BrowserRouter>,
+  document.getElementById('root')
+);
 ```
-