Replacing the depreciated useHistory() hook with the new useNavigate(…

…) hook

This updates the navigation logic to align with React Router v6, replacing the deprecated useHistory() hook with the new useNavigate() hook. React Router v6 introduced useNavigate() to simplify programmatic navigation and remove the legacy useHistory() API. This change ensures the application works seamlessly with React Router v6.

Changes include:

Replaced useHistory() with useNavigate() in the Tutorials component and relevant functions.
Updated navigation calls from history.push() to navigate() for navigating to tutorial pages and selecting tags.
Refactored handleContainerClick and selectTag to use navigate() for URL updates and navigation.
This change ensures the codebase is compatible with the latest version of React Router, improving readability and future-proofing the app.

apps/base-docs/src/pages/tutorials/index.jsx

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 import tutorialData from '../../../tutorials/data.json';
 import authors from '@app/base-docs/static/json/authors.json';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 const TagList = [
   'all',
@@ -47,23 +47,23 @@ function TagChip({ tag, isSelected, setSelectedTag }) {
   );
 }
 
-const handleContainerClick = (event, tutorial, history) => {
+const handleContainerClick = (event, tutorial, navigate) => {
   if (event.target.closest('a')) return;
-  history.push(`/tutorials${tutorial.slug}`);
+  navigate(`/tutorials${tutorial.slug}`);
 };
 
 const handleClick = (event) => {
   event.stopPropagation();
 };
 
 function TutorialListCell({ tutorial }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const authorData = authors[tutorial.author];
   return (
     // <Link to={`/tutorials${tutorial.slug}`}>
     <div
       onClick={(event) => {
-        handleContainerClick(event, tutorial, history);
+        handleContainerClick(event, tutorial, navigate);
       }}
       role="button"
       tabIndex={0}
@@ -105,7 +105,7 @@ const TITLE = 'Base Builder Tutorials';
 
 export default function Tutorials() {
   const [selectedTag, setSelectedTag] = useState('all');
-  const history = useHistory();
+  const navigate = useNavigate();
   const query = useQuery();
 
   useEffect(() => {
@@ -117,9 +117,9 @@ export default function Tutorials() {
 
   const selectTag = useCallback(
     (tag) => {
-      history.push(`?tag=${tag}`);
+      navigate(`?tag=${tag}`);
     },
-    [history],
+    [navigate],
   );
 
   return (