From fcf9625ed04e83f603e9cedd2fbdd4f3850d5937 Mon Sep 17 00:00:00 2001
From: Luc <luc.leray@gmail.com>
Date: Mon, 13 Aug 2018 23:38:02 +0200
Subject: [PATCH] Replace deprecated `props.url` in readme (#4952)

Following https://github.com/zeit/next.js/pull/4950

Fix https://github.com/zeit/next.js/issues/4716

I'm not sure to understand this part, though :
> Note: in order to programmatically change the route without triggering navigation and component-fetching, use `props.url.push` and `props.url.replace` within a component

Is there a difference between :
```jsx
export default () => <a onClick={() => Router.push('/about')}>About</a>
```

and

```jsx
export default withRouter(
  () => <a onClick={() => props.router.push('/about')}>About</a>
)
```
?
---
 readme.md | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/readme.md b/readme.md
index 3ad5ca34..97e128d1 100644
--- a/readme.md
+++ b/readme.md
@@ -365,11 +365,7 @@ Client-side routing behaves exactly like the browser:
 2. If it defines `getInitialProps`, data is fetched. If an error occurs, `_error.js` is rendered
 3. After 1 and 2 complete, `pushState` is performed and the new component is rendered
 
-**Deprecated, use [withRouter](https://github.com/zeit/next.js#using-a-higher-order-component) instead** - Each top-level component receives a `url` property with the following API:
-
-- `pathname` - `String` of the current path excluding the query string
-- `query` - `Object` with the parsed query string. Defaults to `{}`
-- `asPath` - `String` of the actual path (including the query) shows in the browser
+To inject the `pathname`, `query` or `asPath` in your component, you can use [withRouter](#using-a-higher-order-component).
 
 ##### With URL object
 
@@ -518,8 +514,6 @@ Above `Router` object comes with the following API:
 
 The second `as` parameter for `push` and `replace` is an optional _decoration_ of the URL. Useful if you configured custom routes on the server.
 
-_Note: in order to programmatically change the route without triggering navigation and component-fetching, use `props.url.push` and `props.url.replace` within a component_
-
 ##### With URL object
 You can use an URL object the same way you use it in a `<Link>` component to `push` and `replace` an URL.
 
@@ -709,39 +703,44 @@ export default () =>
 Most prefetching needs are addressed by `<Link />`, but we also expose an imperative API for advanced usage:
 
 ```jsx
-import Router from 'next/router'
+import { withRouter } from 'next/router'
 
-export default ({ url }) =>
+export default withRouter(({ router }) =>
   <div>
-    <a onClick={() => setTimeout(() => url.pushTo('/dynamic'), 100)}>
+    <a onClick={() => setTimeout(() => router.push('/dynamic'), 100)}>
       A route transition will happen after 100ms
     </a>
     {// but we can prefetch it!
-    Router.prefetch('/dynamic')}
+    router.prefetch('/dynamic')}
   </div>
+)
 ```
 
 The router instance should be only used inside the client side of your app though. In order to prevent any error regarding this subject, when rendering the Router on the server side, use the imperatively prefetch method in the `componentDidMount()` lifecycle method.
 
 ```jsx
 import React from 'react'
-import Router from 'next/router'
+import { withRouter } from 'next/router'
 
-export default class MyLink extends React.Component {
+class MyLink extends React.Component {
   componentDidMount() {
-    Router.prefetch('/dynamic')
+    const { router } = this.props
+    router.prefetch('/dynamic')
   }
   
   render() {
+    const { router } = this.props
     return (
        <div>
-        <a onClick={() => setTimeout(() => url.pushTo('/dynamic'), 100)}>
+        <a onClick={() => setTimeout(() => router.push('/dynamic'), 100)}>
           A route transition will happen after 100ms
         </a>
       </div>   
     )
   }
 }
+
+export default withRouter(MyLink)
 ```
 
 ### Custom server and routing