rtk-query-monitor

packages/redux-devtools-rtk-query-monitor/demo/package.json

@@ -40,7 +40,6 @@
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.16",
     "@types/react-redux": "^7.1.24",
-    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   useDeletePostMutation,
   useGetPostQuery,
@@ -73,13 +73,13 @@ const PostJsonDetail = ({ id }: { id: string }) => {
 
 export const PostDetail = () => {
   const { id } = useParams<{ id: string }>();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const toast = useToast();
 
   const [isEditing, setIsEditing] = useState(false);
 
-  const { data: post, isLoading } = useGetPostQuery(id);
+  const { data: post, isLoading } = useGetPostQuery(id!);
 
   const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation();
 
@@ -106,7 +106,7 @@ export const PostDetail = () => {
           name={post.name}
           onUpdate={async (name) => {
             try {
-              await updatePost({ id, name }).unwrap();
+              await updatePost({ id: id!, name }).unwrap();
             } catch {
               toast({
                 title: 'An error occurred',
@@ -137,9 +137,7 @@ export const PostDetail = () => {
                 {isUpdating ? 'Updating...' : 'Edit'}
               </Button>
               <Button
-                onClick={() =>
-                  deletePost(id).then(() => history.push('/posts'))
-                }
+                onClick={() => deletePost(id!).then(() => navigate('/posts'))}
                 disabled={isDeleting}
                 colorScheme="red"
               >

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx

@@ -17,7 +17,7 @@ import {
   StatNumber,
   useToast,
 } from '@chakra-ui/react';
-import { Route, Switch, useHistory } from 'react-router-dom';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 import { MdBook } from 'react-icons/md';
 import React, { useState } from 'react';
 import {
@@ -88,7 +88,7 @@ const AddPost = () => {
 
 const PostList = () => {
   const { data: posts, isLoading } = useGetPostsQuery();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   if (isLoading) {
     return <div>Loading</div>;
@@ -101,7 +101,7 @@ const PostList = () => {
   return (
     <List spacing={3}>
       {posts.map(({ id, name }) => (
-        <ListItem key={id} onClick={() => history.push(`/posts/${id}`)}>
+        <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
           <ListIcon as={MdBook} color="green.500" /> {name}
         </ListItem>
       ))}
@@ -147,14 +147,17 @@ export const PostsManager = () => {
           </Box>
         </Box>
         <Box flex={2}>
-          <Switch>
-            <Route path="/posts/:id" component={PostDetail} />
-            <Route>
-              <Center h="200px">
-                <Heading size="md">Select a post to edit!</Heading>
-              </Center>
-            </Route>
-          </Switch>
+          <Routes>
+            <Route path="posts/:id" element={<PostDetail />} />
+            <Route
+              index
+              element={
+                <Center h="200px">
+                  <Heading size="md">Select a post to edit!</Heading>
+                </Center>
+              }
+            />
+          </Routes>
         </Box>
       </Flex>
     </Box>

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { PostsManager } from '../../features/posts/PostsManager';
 import { Box, Heading } from '@chakra-ui/react';
 
@@ -7,9 +7,9 @@ function PostsView() {
   return (
     <Box as="section" p="2">
       <Heading as="h2">Posts Demo</Heading>
-      <Switch>
-        <Route path="/" component={PostsManager} />
-      </Switch>
+      <Routes>
+        <Route path="/*" element={<PostsManager />} />
+      </Routes>
     </Box>
   );
 }