The Next.js router allows you to do client-side route transitions between pages, similarly to a single-page application.
A special React component called `Link` is provided to do this client-side route transition.
```jsx
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Linkhref="/">
<a>Home</a>
</Link>
</li>
<li>
<Linkhref="/about">
<a>About Us</a>
</Link>
</li>
</ul>
)
}
export default Home
```
When linking to a route with [dynamic path segments](/docs/routing/dynamic-routes.md) you have to provide `href` and `as` to make sure the router knows which JavaScript file to load.
-`href` - The name of the page in the `pages` directory. For example `/blog/[slug]`.
-`as` - The url that will be shown in the browser. For example `/blog/hello-world`.
To access the [`router` object](/docs/api-reference/next/router.md#router-object) in a React component you can use [`useRouter`](/docs/api-reference/next/router.md#useRouter) or [`withRouter`](/docs/api-reference/next/router.md#withRouter).
In general we recommend using [`useRouter`](/docs/api-reference/next/router.md#useRouter).
## Learn more
The router is divided in multiple parts:
<divclass="card">
<ahref="/docs/api-reference/next/link.md">
<b>next/link:</b>
<small>Handle client-side navigations.</small>
</a>
</div>
<divclass="card">
<ahref="/docs/api-reference/next/router.md">
<b>next/router:</b>
<small>Leverage the router API in your pages.</small>