update packages and migrate to react-router-dom v6

Author: lukasvice

.eslintrc.json

@@ -14,7 +14,8 @@
         "prettier",
         "plugin:prettier/recommended",
         "plugin:@typescript-eslint/recommended",
-        "plugin:import/typescript"
+        "plugin:import/typescript",
+        "plugin:jest/recommended"
     ],
     "parserOptions": {
         "sourceType": "module",

jest.config.json

@@ -1,4 +1,5 @@
 {
+    "testEnvironment": "jsdom",
     "transform": {
         "^.+\\.(t|j)sx?$": "ts-jest"
     },

package.json

@@ -43,30 +43,42 @@
     "access": "public"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.3",
-    "@types/jest": "^26.0.22",
-    "@types/react": "^17.0.3",
-    "@types/react-router-dom": "^5.1.8",
-    "@typescript-eslint/eslint-plugin": "^4.21.0",
-    "@typescript-eslint/parser": "^4.21.0",
-    "eslint": "^7.23.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.3.4",
-    "eslint-plugin-prettier": "^3.3.1",
-    "jest": "^26.6.3",
-    "next": "^11.0.1",
-    "next-router-mock": "^0.6.1",
-    "prettier": "^2.2.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^28.1.3",
+    "@types/react": "^17.0.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-prettier": "^4.1.0",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "next": "^12.2.0",
+    "next-router-mock": "^0.7.4",
+    "prettier": "^2.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
-    "ts-jest": "^26.5.4",
-    "typescript": "^4.2.4"
+    "react-router-dom": "^6.3.0",
+    "ts-jest": "^28.0.5",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0"
+    "next": "^12.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    }
   }
 }

src/reactRouterPagination.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react'
-import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 
 import { IndexType, IUseQueryAndPagination, QueryParameters } from './types'
 import { convert } from './utils'
@@ -25,9 +25,8 @@ function extractCurrentQueryParameters(
 
 export const useQueryAndPagination: IUseQueryAndPagination = function (config) {
   const { indexType = IndexType.ZERO_BASED, pageSize = 15 } = config || {}
-  const routerHistory = useHistory()
-  const { url: routerUrl } = useRouteMatch()
-  const { search: routeQuery } = useLocation()
+  const navigate = useNavigate()
+  const { pathname: routerUrl, search: routeQuery } = useLocation()
 
   const params = useMemo(() => new URLSearchParams(routeQuery), [routeQuery])
 
@@ -48,12 +47,12 @@ export const useQueryAndPagination: IUseQueryAndPagination = function (config) {
       params.delete('page')
       params.delete('size')
 
-      routerHistory.push({
+      navigate({
         pathname: routerUrl,
         search: params.toString(),
       })
     },
-    [routerHistory, params]
+    [navigate, params]
   )
 
   const clear = useCallback(() => {
@@ -64,21 +63,21 @@ export const useQueryAndPagination: IUseQueryAndPagination = function (config) {
     params.delete('page')
     params.delete('size')
 
-    routerHistory.push({
+    navigate({
       pathname: routerUrl,
       search: params.toString(),
     })
-  }, [routerHistory, params])
+  }, [navigate, params])
 
   const setPage = useCallback(
     (page: number) => {
       params.set('page', page.toString())
-      routerHistory.push({
+      navigate({
         pathname: routerUrl,
         search: params.toString(),
       })
     },
-    [routerHistory, params]
+    [navigate, params]
   )
 
   return {