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:
parent
1889c80472
commit
fcf9625ed0
29
readme.md
29
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
|
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
|
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:
|
To inject the `pathname`, `query` or `asPath` in your component, you can use [withRouter](#using-a-higher-order-component).
|
||||||
|
|
||||||
- `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
|
|
||||||
|
|
||||||
##### With URL object
|
##### 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.
|
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
|
##### 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.
|
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:
|
Most prefetching needs are addressed by `<Link />`, but we also expose an imperative API for advanced usage:
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import Router from 'next/router'
|
import { withRouter } from 'next/router'
|
||||||
|
|
||||||
export default ({ url }) =>
|
export default withRouter(({ router }) =>
|
||||||
<div>
|
<div>
|
||||||
<a onClick={() => setTimeout(() => url.pushTo('/dynamic'), 100)}>
|
<a onClick={() => setTimeout(() => router.push('/dynamic'), 100)}>
|
||||||
A route transition will happen after 100ms
|
A route transition will happen after 100ms
|
||||||
</a>
|
</a>
|
||||||
{// but we can prefetch it!
|
{// but we can prefetch it!
|
||||||
Router.prefetch('/dynamic')}
|
router.prefetch('/dynamic')}
|
||||||
</div>
|
</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.
|
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
|
```jsx
|
||||||
import React from 'react'
|
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() {
|
componentDidMount() {
|
||||||
Router.prefetch('/dynamic')
|
const { router } = this.props
|
||||||
|
router.prefetch('/dynamic')
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { router } = this.props
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<a onClick={() => setTimeout(() => url.pushTo('/dynamic'), 100)}>
|
<a onClick={() => setTimeout(() => router.push('/dynamic'), 100)}>
|
||||||
A route transition will happen after 100ms
|
A route transition will happen after 100ms
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default withRouter(MyLink)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Custom server and routing
|
### Custom server and routing
|
||||||
|
|
Loading…
Reference in a new issue