ant-design/components/pagination/demo/itemRender.md

---
order: 11
title:
  zh-CN: 上一步和下一步
  en-US: Prev and next
---

## zh-CN

修改上一步和下一步为文字链接。

## en-US

Use text link for prev and next button.

```tsx
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';
import React from 'react';

const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
  if (type === 'prev') {
    return <a>Previous</a>;
  }
  if (type === 'next') {
    return <a>Next</a>;
  }
  return originalElement;
};

const App: React.FC = () => <Pagination total={500} itemRender={itemRender} />;

export default App;
```
Improve itemRender of Pagination 2017-08-30 14:02:49 +08:00			`---`
docs: Pagination add all config demo 2020-03-30 10:50:29 +08:00			`order: 11`
Improve itemRender of Pagination 2017-08-30 14:02:49 +08:00			`title:`
			`zh-CN: 上一步和下一步`
			`en-US: Prev and next`
			`---`

			`## zh-CN`

			`修改上一步和下一步为文字链接。`

			`## en-US`

			`Use text link for prev and next button.`

docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			```tsx
			`import type { PaginationProps } from 'antd';`
Improve itemRender of Pagination 2017-08-30 14:02:49 +08:00			`import { Pagination } from 'antd';`
chore: merge master 2022-05-21 22:14:15 +08:00			`import React from 'react';`
Improve itemRender of Pagination 2017-08-30 14:02:49 +08:00
docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			`const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {`
Improve itemRender of Pagination 2017-08-30 14:02:49 +08:00			`if (type === 'prev') {`
			`return <a>Previous</a>;`
:lipstick: prittier all files 2019-05-07 14:57:32 +08:00			`}`
			`if (type === 'next') {`
Improve itemRender of Pagination 2017-08-30 14:02:49 +08:00			`return <a>Next</a>;`
			`}`
			`return originalElement;`
docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			`};`
Improve itemRender of Pagination 2017-08-30 14:02:49 +08:00
docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			`const App: React.FC = () => <Pagination total={500} itemRender={itemRender} />;`

			`export default App;`
:lipstick: prittier all files 2019-05-07 14:57:32 +08:00			```