1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

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>
)
```
?
This commit is contained in:
Luc 2018-08-13 23:38:02 +02:00 committed by Tim Neutkens
parent 1889c80472
commit fcf9625ed0

View file

@ -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