react-router-6 migration

example/package.json

@@ -9,7 +9,7 @@
     "react": "link:../node_modules/react",
     "react-dom": "^16.13.1",
     "react-router-dom": "link:../node_modules/react-router-dom",
-    "react-scripts": "^4.0.1",
+    "react-scripts": "^5.0.1",
     "react-syntax-highlighter": "^13.5.3",
     "use-route-as-state": "link:.."
   },

example/src/App.jsx

@@ -3,18 +3,18 @@ import UseArrayQueryKeyCode from '!!raw-loader!./UseArrayQueryKey'
 import UseQueryKeyCode from '!!raw-loader!./UseQueryKey'
 import UseQueryParamCode from '!!raw-loader!./UseQueryParam'
 import UseRouteParamCode from '!!raw-loader!./UseRouteParam'
-import { Box, Card, CardContent, CardMedia, Typography } from '@material-ui/core'
+import {Box, Card, CardContent, CardMedia, Typography} from '@material-ui/core'
 import React from 'react'
-import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import {BrowserRouter, Route, Routes} from 'react-router-dom'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import CreateLinkWithState from './CreateLinkWithState'
 import UseArrayQueryKey from './UseArrayQueryKey'
 import UseQueryKey from './UseQueryKey'
 import UseQueryParam from './UseQueryParam'
 import UseRouteParam from './UseRouteParam'
 
-const Example = ({ title, caption, description, code, children }) => {
-  return <Card style={{ margin: 5 }}>
+const Example = ({title, caption, description, code, children}) => {
+  return <Card style={{margin: 5}}>
     <CardContent>
       <Typography variant='h4'>{title}</Typography>
       <Typography variant='subtitle1'>{description}</Typography>
@@ -31,31 +31,31 @@ const Examples = () => {
 
   return <Box display='flex' justifyContent='space-evenly' flexWrap="wrap">
     <Example title='Use Query Params'
-      description='You will see how the state changes simultaneously in both the label below and the address bar'
-      code={UseQueryParamCode}>
-      <UseQueryParam />
+             description='You will see how the state changes simultaneously in both the label below and the address bar'
+             code={UseQueryParamCode}>
+      <UseQueryParam/>
     </Example>
     <Example title='Use Route Params'
-      description='You will see how the state changes simultaneously in both the label below and the address bar'
-      caption={<>This is just for example. I don't recommend using a TextField for updating Route Params.<br />
-        You may want to use DropDown or something.</>}
-      code={UseRouteParamCode}>
-      <UseRouteParam />
+             description='You will see how the state changes simultaneously in both the label below and the address bar'
+             caption={<>This is just for example. I don't recommend using a TextField for updating Route Params.<br/>
+               You may want to use DropDown or something.</>}
+             code={UseRouteParamCode}>
+      <UseRouteParam/>
     </Example>
     <Example title='Try Links'
-      description='Create URL here to see how it affect other components'
-      code={CreateLinkWithStateCode}>
-      <CreateLinkWithState />
+             description='Create URL here to see how it affect other components'
+             code={CreateLinkWithStateCode}>
+      <CreateLinkWithState/>
     </Example>
     <Example title='Use Specific Query Key'
-      description='Get a reactive reference to specific Query item'
-      code={UseQueryKeyCode}>
-      <UseQueryKey />
+             description='Get a reactive reference to specific Query item'
+             code={UseQueryKeyCode}>
+      <UseQueryKey/>
     </Example>
     <Example title='Array support in Query String'
-      description='Get a reactive reference to specific Query item'
-      code={UseArrayQueryKeyCode}>
-      <UseArrayQueryKey />
+             description='Get a reactive reference to specific Query item'
+             code={UseArrayQueryKeyCode}>
+      <UseArrayQueryKey/>
     </Example>
   </Box>
 }
@@ -64,9 +64,9 @@ const App = () => {
 
   return (
     <BrowserRouter basename='/use-route-as-state/'>
-      <Switch>
-        <Route path='/' component={Examples} />
-      </Switch>
+      <Routes>
+        <Route path='/' element={<Examples/>}/>
+      </Routes>
     </BrowserRouter>
   )
 }

example/src/UseRouteParam.jsx

@@ -1,6 +1,6 @@
 import { Box, TextField, Typography } from '@material-ui/core'
 import React from 'react'
-import { Route, Switch, useRouteMatch } from 'react-router-dom'
+import { Route, Routes, useLocation } from 'react-router-dom'
 import { useRouteParams } from 'use-route-as-state'
 
 const UseRouteParam = () => {
@@ -16,9 +16,9 @@ const UseRouteParam = () => {
 }
 
 export default () => {
-    const { path } = useRouteMatch()
+    const { pathname } = useLocation()
 
-    return <Switch>
-        <Route path={`${path}:rParam?`} component={UseRouteParam} />
-    </Switch>
+    return <Routes>
+        <Route path={`${pathname}:rParam?`} element={UseRouteParam} />
+    </Routes>
 }