c6dc34e4d7
[ch4109] Closes https://github.com/vercel/next.js/issues/14500 Our current docs for `next/router` use examples from both `useRouter` and `import Router from 'next/router'`, with this PR I'm unifying the API into `useRouter` (`withRouter` is still going to be mentioned multiple times as it is the HOC alternative) and no longer mentioning that you can import a global `Router` object from `next/router`, not sure if I should mention it at least once but that didn't seem to be required. I also did some structural changes to the docs for `next/router`, now every method starts with a description, then the implementation and explanation of the parameters of the method, and then the usage example, because every method uses the same `Usage` title the hash for them would be something like `#usage`, `#usage-1`, `#usage-2`, e.t.c, so I'm not very happy with this but it looks good. Feedback wanted 🙏
30 lines
935 B
Markdown
30 lines
935 B
Markdown
---
|
|
description: Client-side navigations are also possible using the Next.js Router instead of the Link component. Learn more here.
|
|
---
|
|
|
|
# Imperatively
|
|
|
|
<details>
|
|
<summary><b>Examples</b></summary>
|
|
<ul>
|
|
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/using-router">Using Router</a></li>
|
|
</ul>
|
|
</details>
|
|
|
|
[`next/link`](/docs/api-reference/next/link.md) should be able to cover most of your routing needs, but you can also do client-side navigations without it, take a look at the [documentation for `next/router`](/docs/api-reference/next/router.md).
|
|
|
|
The following example shows how to do basic page navigations with [`useRouter`](/docs/api-reference/next/router.md#useRouter):
|
|
|
|
```jsx
|
|
import { useRouter } from 'next/router'
|
|
|
|
function ReadMore() {
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<span onClick={() => router.push('/about')}>Click here to read more</span>
|
|
)
|
|
}
|
|
|
|
export default ReadMore
|
|
```
|