)
```
```jsx
// pages/character.js
import React from 'react'
export default class Character extends React.Component {
static async getInitialProps({ query }) {
return fetch(`//swapi.co/api/films/${query.id}`).then(x => x.json())
}
render() {
return
{this.props.name}
}
}
```
## Prefetching data
Next.js has this great feature allowing you to prefetch data for your next routes
in the background.
You can benefit from that by simply putting a `prefetch` property on any Link :
```jsx
The Empire Strikes Back
```
## Imperative API
### Router.pushRoute(name, params [, options])
```jsx
import Router from '../routes'
```
### Router.replaceRoute(name, params [, options])
```jsx
import Router from '../routes'
```
### Router.prefetchRoute(name, params)
```jsx
import Router from '../routes'
```
### Router.getRoutePath(name, params)
```js
import Router from '../routes'
console.log(Router.getRoutePath('characterAndFilm', { characterId: 2, filmId: 5 }))
// => '/character-and-film/2/5'
```
## Query params
The Link component has a `queryParams` prop which you can fill with an object of regular query parameters.
```jsx
The Empire Strikes Back
```
This will result in the following url: `/films/2?utm_campaign=website`.
You can use `queryParams` with the imperative API as well
```js
// It doesn't work only for pushRoute, but for all the other methods as well.
Router.pushRoute('film', {
id: 2,
queryParams: {
utm_campaign: 'website'
}
})
```
---
_Source: https://npm.io/package/nextjs-dynamic-routes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._