Обновил версию react и react-router-dom

package.json

@@ -4,24 +4,25 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
-    "@reduxjs/toolkit": "^1.8.2",
-    "@toast-ui/editor": "^3.2.0",
-    "@toast-ui/react-editor": "^3.2.0",
-    "antd": "^4.23.0",
+    "@ant-design/cssinjs": "^1.5.6",
+    "@ant-design/icons": "5.0.1",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@toast-ui/editor": "^3.1.1",
+    "@toast-ui/react-editor": "^3.1.1",
+    "antd": "^5.2.2",
     "axios": "^0.27.2",
-    "bootstrap": "^5.1.3",
-    "dayjs": "^1.11.3",
+    "bootstrap": "^5.2.3",
+    "dayjs": "^1.11.7",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.6",
-    "react-router-dom": "^5.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^7.2.9",
+    "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
-    "react-transition-group": "^4.4.2",
+    "react-transition-group": "^4.4.5",
     "redux-persist": "^6.0.0",
     "source-map-explorer": "^2.5.3",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.6"
   },
   "scripts": {
     "check": "npm run prettier:check && npm run lint && cross-env CI=true npm run test && cross-env CI=true npm run build",
@@ -54,18 +55,18 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.4",
-    "@types/jest": "^27.4.1",
-    "@types/react-dom": "^17.0.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^27.5.2",
+    "@types/react-dom": "^17.0.19",
     "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.24",
+    "@types/styled-components": "^5.1.26",
     "cross-env": "^7.0.3",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-eslint-plugin": "^5.0.6",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1"
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-eslint-plugin": "^5.0.8",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.2",
+    "prettier": "^2.8.4"
   }
 }

src/app/App.jsx

@@ -1,5 +1,5 @@
 import { useDispatch } from 'react-redux';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { useEffect, lazy, Suspense } from 'react';
 import { useAuth } from 'common/context/Auth/useAuth';
 import { Header } from 'components/layout/header/Header';
@@ -18,28 +18,28 @@ const HelpPage = lazy(() => import('pages/HelpPage'));
 const routes = [
   {
     key: 10,
-    component: QuestionsList,
+    element: <QuestionsList />,
     path: '/',
     exact: true,
   },
   {
     key: 20,
-    component: CreateQuestion,
+    element: <CreateQuestion />,
     path: '/create',
   },
   {
     key: 30,
-    component: QuestionPage,
+    element: <QuestionPage />,
     path: '/question/:id',
   },
   {
     key: 40,
-    component: ProfileUser,
+    element: <ProfileUser />,
     path: '/profile',
   },
   {
     key: 50,
-    component: HelpPage,
+    element: <HelpPage />,
     path: '/help',
   },
 ];
@@ -60,11 +60,11 @@ export const App = () => {
       <PatchUserModal />
       <Header />
       <Suspense fallback={<LazyPlaceholder />}>
-        <Switch>
+        <Routes>
           {routes.map((route) => (
             <Route key={route.key} {...route} />
           ))}
-        </Switch>
+        </Routes>
       </Suspense>
       <Footer />
     </>

src/components/layout/header/AdaptiveMenu.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { Link, useHistory, useLocation } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Button } from 'antd';
@@ -22,12 +22,12 @@ const StyledMenu = styled.ul`
 
 const AdaptiveMenu = ({ toggleMobileMenu, mobileMenu }) => {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { token, executeLoggingInProcess, logout } = useAuth();
 
   const handleAddQuestion = useCallback(() => {
-    history.push('/create');
-  }, [history]);
+    navigate('/create');
+  }, [navigate]);
 
   useEffect(() => {
     if (mobileMenu) {

src/features/questions/create-question/CreateQuestionPage.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Link, Redirect, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { Editor } from '@toast-ui/react-editor';
 import { PlusOutlined } from '@ant-design/icons';
@@ -93,7 +93,7 @@ CancelLinkLabel.propTypes = {
 
 const CreateQuestion = () => {
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
   const editorRef = useRef();
 
   const profile = useSelector(selectProfile);
@@ -148,7 +148,7 @@ const CreateQuestion = () => {
         notification.success({
           message: 'Вопрос успешно опубликован',
         });
-        history.push('/');
+        navigate('/');
         setQuestion('');
         setFullDescription('');
         editorRef.current.getInstance().reset();
@@ -174,7 +174,7 @@ const CreateQuestion = () => {
   }, [question]);
 
   // если не авторизован, то кидаем на главную
-  if (!token) return <Redirect to="/" />;
+  if (!token) return navigate('/');
 
   const { REACT_APP_FEATURE_TAGS } = process.env;
 

src/features/questions/question-page/QuestionPage.jsx

@@ -22,7 +22,9 @@ const QuestionPage = () => {
   const fetching = useSelector(selectQuestionsFetching);
   const question = useSelector(selectOpenedQuestion);
 
-  useEffect(() => dispatch(fetchQuestionById(id)), [dispatch, id]);
+  useEffect(() => {
+    dispatch(fetchQuestionById(id));
+  }, [dispatch, id]);
 
   return (
     <div className="container">

src/features/questions/questions-list/question-actions/CommentsAction.jsx

@@ -1,4 +1,4 @@
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import CommentsIcon from 'components/icons/CommentsIcon';
@@ -9,12 +9,12 @@ import { TheQuestionAction } from './TheQuestionAction';
 export const CommentsAction = ({ questionId }) => {
   const { REACT_APP_FEATURE_COMMENTARIES } = process.env;
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const question = useSelector((state) => questionSelectors.selectById(state, questionId));
 
   const handleOpenComments = () => {
-    history.push(`/question/${question._id}#scroll`);
+    navigate(`/question/${question._id}#scroll`);
   };
 
   if (!REACT_APP_FEATURE_COMMENTARIES) return null;

src/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import 'dayjs/locale/ru';
@@ -11,21 +11,20 @@ import { BASE_API_URL, LS_TOKEN_KEY } from './app/constants';
 import '@toast-ui/editor/dist/toastui-editor.css';
 import './assets/toast-ui-iqa-theme.css';
 import 'bootstrap/dist/css/bootstrap-grid.min.css';
-import 'antd/dist/antd.min.css';
+import '@ant-design/cssinjs';
 import { GlobalProvider } from './app/GlobalProvider';
 
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
 axios.defaults.baseURL = BASE_API_URL;
 axios.defaults.headers.authorization = `Bearer ${localStorage.getItem(LS_TOKEN_KEY)}`;
 
 dayjs.extend(relativeTime);
 dayjs.extend(calendar);
 dayjs.locale('ru');
 
-ReactDOM.render(
+root.render(
   <GlobalProvider>
     <App />
-  </GlobalProvider>,
-  document.getElementById('root')
+  </GlobalProvider>
 );
-
-// fake