33 lines
847 B
TypeScript
33 lines
847 B
TypeScript
|
import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router';
|
||
|
|
import Pagination from '@mui/material/Pagination';
|
||
|
|
import PaginationItem from '@mui/material/PaginationItem';
|
||
|
|
|
||
|
|
function Content() {
|
||
|
|
const location = useLocation();
|
||
|
|
const query = new URLSearchParams(location.search);
|
||
|
|
const page = parseInt(query.get('page') || '1', 10);
|
||
|
|
return (
|
||
|
|
<Pagination
|
||
|
|
page={page}
|
||
|
|
count={10}
|
||
|
|
renderItem={(item) => (
|
||
|
|
<PaginationItem
|
||
|
|
component={Link}
|
||
|
|
to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
|
||
|
|
{...item}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function PaginationLink() {
|
||
|
|
return (
|
||
|
|
<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
|
||
|
|
<Routes>
|
||
|
|
<Route path="*" element={<Content />} />
|
||
|
|
</Routes>
|
||
|
|
</MemoryRouter>
|
||
|
|
);
|
||
|
|
}
|