score:1
i won't edit your code, but outline a principle of how to achieve your solution.
you need to keep your pagination state in your component. then, you need to do 2 things:
- when you change the page, set your query parameter in the url to this page number. also keep that page number in your state, as your pagination is a controlled component now.
- when you initially load the component, get a page number from the url params and set your pagination state with this information. so table can be displayed on that page.
here is the simplest working example:
import react from 'react';
import './app.css';
import { usehistory } from "react-router-dom";
const app = (props: object) => {
const history = usehistory();
let search = window.location.search;
let params = new urlsearchparams(search);
const [page, setpage] = react.usestate<number>( parseint("" + params.get('page')))
const paginate = (n: number) => {
setpage(n)
history.push({
pathname: '/',
search: '?page=' + n
})
}
return (
<div >
<div onclick={()=>paginate(1)} style={page===1 ? {fontsize:30} : {}}>1</div>
<div onclick={()=>paginate(2)} style={page===2 ? {fontsize:30} : {}}>2</div>
</div>
);
}
export default app;
codesandbox:
https://codesandbox.io/s/react-pagination-7do5s
alternatively, search, params and page variables could be calculated and set only after the first mount, in react.useeffect hook. up to you.
please note this is a typescript file, if you're only using javascript, remove type. also i am using react-router-dom to change query parameter in the url. this will only work, when this component is wrapped by router.
my index.tsx file:
reactdom.render(
<react.strictmode>
<router>
<app />
</router>
</react.strictmode>,
document.getelementbyid('root')
);
score:0
for people who are looking at this solution, after the react-router upgrade we use navigate("/page")
after importing usenavigate
instead of history.push()
Source: stackoverflow.com
Related Query
- React Search title result and Pagination Material UI
- Selection and Remote Data Pagination on Material Table React
- want to increase previous and next page pagination icon size in material react table
- React img tag issue with url and class
- react routing and django url conflict
- React table dynamic page size but with size limit and pagination
- How to create a preview (Image and description) to the Url when shared link on Social media,Gmail and Skype using React JS?
- Is there a cleaner way of getting current URL in both client and server side in isomorphic react apps?
- Dot and hyphen disallowed React Router URL parameters?
- Select all and Select None buttons in Autocomplete Material UI React
- How to make material ui icon clickable and redirect to url
- Handle Pagination Sorting and Filtering Separately in Antd Table React
- React Starter Kit and Material UI: userAgent should be supplied in the muiTheme context for server-side rendering
- Using different API url for development and production with React and axios
- Disable autofill forms with React and Material UI
- Setup react-styleguidist, Create React App, Typescript, Material UI and styled-components
- Remove .html extension from a url for a website built using React and Webpack
- React and i18n - translate by adding the locale in the URL
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- React with Material UI Table Pagination show all entries
- Unique url for pagination pages in React
- Min and Max Date in Material UI DatePicker in React
- React router 4 `Link` component only changing the url and not updating the route
- Why does my React app append the external URL to http://localhost:/<port> and not to ONLY the URL itself?
- Material UI (Scrollspy) - React - use tabs to move through list and auto scroll to index
- React JSX and Django reverse URL
- Keeping Material UI tabs and React Router in sync
- Implement pagination for React Material table
- How to center placeholder and text in React Material UI TextField
- Get table pagination buttons and rows per page to the left on Material UI
More Query from same tag
- how to disable rtl when phone language changes?
- How can I play an audio when a component is mounted on React?
- jsx loop wrapper for html component on condition
- Typescript and react conditional render
- React-Redux: Actions must be plain objects. Use custom middleware for async actions
- How do I fix my navbar display over divs?
- How do you create edgeless graphql element in Gatsby?
- Jest error TypeError: (0 , _jest.test) is not a function
- How can I run multiple Node App in a Github Actions?
- Get all child component hrefs using a React higher-order component
- Crud React spring-boot app returns 404 when client is in Docker
- React storybook sass-loader import node_modules
- How to open the file upload dialogue box When I click the Icon
- uploading xlsx or csv files to firebase
- how to make a Next.js "Link" 's "href" property optional
- How to use react-tether with react-dom createPortal to be able to style tethered component according to the component it's tethered to?
- setTimeout() outputs a non expected number/timer
- How to bind two function for a button click in reactjs
- Handling multiple forms in React
- how to make parent function not work when the button is pressed
- React Router doesnt work when I try to render the components
- Firebase hosting redirected website doesnt have all pages
- ReactJS: how using queryselector variable out a function
- React useState hook: object property remains unchanged
- React-Router open route when page loads
- How to make sure only one socket.io connection is open per user?
- TypeScript: make field public only for special classes
- disable all click synthesis events of react
- React Typescript how to pass props with types
- How to use environment variables secrets safely in production