fix: routing issues (#590)

packages/core/src/components/App/App.tsx

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { translate } from 'react-polyglot';
 import { connect } from 'react-redux';
-import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { ScrollSync } from 'react-scroll-sync';
 import TopBarProgress from 'react-topbar-progress-indicator';
 
@@ -12,7 +12,6 @@ import { loginUser as loginUserAction } from '@staticcms/core/actions/auth';
 import { discardDraft as discardDraftAction } from '@staticcms/core/actions/entries';
 import { currentBackend } from '@staticcms/core/backend';
 import { colors, GlobalStyles } from '@staticcms/core/components/UI/styles';
-import { history } from '@staticcms/core/routing/history';
 import { getDefaultPath } from '../../lib/util/collection.util';
 import CollectionRoute from '../Collection/CollectionRoute';
 import EditorRoute from '../Editor/EditorRoute';
@@ -84,6 +83,8 @@ const App = ({
   scrollSyncEnabled,
   discardDraft,
 }: TranslatedProps<AppProps>) => {
+  const navigate = useNavigate();
+
   const configError = useCallback(
     (error?: string) => {
       return (
@@ -140,7 +141,7 @@ const App = ({
           base_url={config.config.backend.base_url}
           authEndpoint={config.config.backend.auth_endpoint}
           config={config.config}
-          clearHash={() => history.replace('/')}
+          clearHash={() => navigate('/', { replace: true })}
           t={t}
         />
       </div>

packages/core/src/components/App/Header.tsx

@@ -12,13 +12,13 @@ import Toolbar from '@mui/material/Toolbar';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { translate } from 'react-polyglot';
 import { connect } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 
 import { logoutUser as logoutUserAction } from '@staticcms/core/actions/auth';
-import { createNewEntry } from '@staticcms/core/actions/collections';
 import { openMediaLibrary as openMediaLibraryAction } from '@staticcms/core/actions/mediaLibrary';
 import { checkBackendStatus as checkBackendStatusAction } from '@staticcms/core/actions/status';
 import { buttons, colors } from '@staticcms/core/components/UI/styles';
-import { stripProtocol } from '@staticcms/core/lib/urlHelper';
+import { stripProtocol, getNewEntryUrl } from '@staticcms/core/lib/urlHelper';
 import NavLink from '../UI/NavLink';
 import SettingsDropdown from '../UI/SettingsDropdown';
 
@@ -82,9 +82,7 @@ const Header = ({
     setAnchorEl(null);
   }, []);
 
-  const handleCreatePostClick = useCallback((collectionName: string) => {
-    createNewEntry(collectionName);
-  }, []);
+  const navigate = useNavigate();
 
   const creatableCollections = useMemo(
     () =>
@@ -148,7 +146,7 @@ const Header = ({
                 {creatableCollections.map(collection => (
                   <MenuItem
                     key={collection.name}
-                    onClick={() => handleCreatePostClick(collection.name)}
+                    onClick={() => navigate(getNewEntryUrl(collection.name))}
                   >
                     {collection.label_singular || collection.label}
                   </MenuItem>

packages/core/src/components/Collection/Sidebar.tsx

@@ -10,8 +10,8 @@ import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import React, { useMemo } from 'react';
 import { translate } from 'react-polyglot';
+import { useNavigate } from 'react-router-dom';
 
-import { searchCollections } from '@staticcms/core/actions/collections';
 import { colors } from '@staticcms/core/components/UI/styles';
 import { getAdditionalLinks, getIcon } from '@staticcms/core/lib/registry';
 import NavLink from '../UI/NavLink';
@@ -48,6 +48,15 @@ const Sidebar = ({
   t,
   filterTerm,
 }: TranslatedProps<SidebarProps>) => {
+  const navigate = useNavigate();
+  function searchCollections(query: string, collection?: string) {
+    if (collection) {
+      navigate(`/collections/${collection}/search/${query}`);
+    } else {
+      navigate(`/search/${query}`);
+    }
+  }
+
   const collectionLinks = useMemo(
     () =>
       Object.values(collections)

packages/core/src/components/Editor/Editor.tsx

@@ -2,6 +2,8 @@ import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { translate } from 'react-polyglot';
 import { connect } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { createHashHistory } from 'history';
 
 import { logoutUser as logoutUserAction } from '@staticcms/core/actions/auth';
 import {
@@ -25,7 +27,6 @@ import {
 import { selectFields } from '@staticcms/core/lib/util/collection.util';
 import { useWindowEvent } from '@staticcms/core/lib/util/window.util';
 import { selectEntry } from '@staticcms/core/reducers/selectors/entries';
-import { history, navigateToCollection, navigateToNewEntry } from '@staticcms/core/routing/history';
 import confirm from '../UI/Confirm';
 import Loader from '../UI/Loader';
 import EditorInterface from './EditorInterface';
@@ -74,6 +75,10 @@ const Editor = ({
 }: TranslatedProps<EditorProps>) => {
   const [version, setVersion] = useState(0);
 
+  const history = createHashHistory();
+
+  const navigate = useNavigate();
+
   const createBackup = useMemo(
     () =>
       debounce(function (entry: Entry, collection: Collection) {
@@ -111,7 +116,7 @@ const Editor = ({
           deleteBackup();
 
           if (createNew) {
-            navigateToNewEntry(collection.name);
+            navigate(`/collections/${collection.name}/new`, { replace: true });
             if (duplicate && entryDraft.entry) {
               createDraftDuplicateFromEntry(entryDraft.entry);
             }
@@ -135,7 +140,7 @@ const Editor = ({
       return;
     }
 
-    navigateToNewEntry(collection.name);
+    navigate(`/collections/${collection.name}/new`, { replace: true });
     createDraftDuplicateFromEntry(entryDraft.entry);
   }, [collection.name, createDraftDuplicateFromEntry, entryDraft.entry]);
 
@@ -161,13 +166,13 @@ const Editor = ({
     }
 
     if (!slug) {
-      return navigateToCollection(collection.name);
+      return navigate(`/collections/${collection.name}`);
     }
 
     setTimeout(async () => {
       await deleteEntry(collection, slug);
       deleteBackup();
-      return navigateToCollection(collection.name);
+      return navigate(`/collections/${collection.name}`);
     }, 0);
   }, [collection, deleteBackup, deleteEntry, entryDraft.hasChanged, slug]);