Необнаруженная ошибка: не удалось найти соответствующий маршрут при перенаправлении на страницу /login после выхода из системы

Я пытаюсь реализовать JWT в своем проекте, и статья предлагает хорошее решение:

https://dev.to/sanjayttg/jwt-authentication-in-react-with-react-router-1d03.

Маршруты.jsx

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { useAuth } from "../provider/authProvider";
import { ProtectedRoute } from "./ProtectedRoute";
import Login from "../pages/Login";
import Logout from "../pages/Logout";

const Routes = () => {
  const { token } = useAuth();

  // Define public routes accessible to all users
  const routesForPublic = [
    {
      path: "/service",
      element: <div>Service Page</div>,
    },
    {
      path: "/about-us",
      element: <div>About Us</div>,
    },
  ];

  // Define routes accessible only to authenticated users
  const routesForAuthenticatedOnly = [
    {
      path: "/",
      element: <ProtectedRoute />, // Wrap the component in ProtectedRoute
      children: [
        {
          path: "",
          element: <div>User Home Page</div>,
        },
        {
          path: "/profile",
          element: <div>User Profile</div>,
        },
        {
          path: "/logout",
          element: <Logout/>,
        },
      ],
    },
  ];

  // Define routes accessible only to non-authenticated users
  const routesForNotAuthenticatedOnly = [
    {
      path: "/",
      element: <div>Home Page</div>,
    },
    {
      path: "/login",
      element: <Login/>,
    },
  ];

  // Combine and conditionally include routes based on authentication status
  const router = createBrowserRouter([
    ...routesForPublic,
    ...(!token ? routesForNotAuthenticatedOnly : []),
    ...routesForAuthenticatedOnly,
  ]);

  // Provide the router configuration using RouterProvider
  return <RouterProvider router = {router} />;
};

export default Routes;

ProtectedRoute.jsx

import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../provider/authProvider";

export const ProtectedRoute = () => {
  const { token } = useAuth();

  // Check if the user is authenticated
  if (!token) {
    // If not authenticated, redirect to the login page
    return <Navigate to = "/login" />;
  }

  // If authenticated, render the child routes
  return <Outlet />;
};

Гитхаб: https://github.com/sanjay-arya/react-auth-demo

По сути, я создал контекст аутентификации, предоставляющий информацию о токене для всех маршрутов и разрешающий доступ к маршрутам в зависимости от того, есть ли у пользователя токен или нет. Он также имеет систему входа и выхода из системы, удаляющую/создающую токены.

Предоставленный код работает нормально и так. Проблема возникает, когда я хочу перенаправить пользователя на страницу "/login" вместо страницы "/" после выхода из системы. например Я изменил navigate("/", { replace: true }) на navigate("/login", { replace: true }); в Logout.jsx.

Я получаю эту ошибку:

react-router-dom.js?v=7652cf65:202 Uncaught Error: Could not find a matching route for errors on route IDs: 2
    at invariant (react-router-dom.js?v=7652cf65:202:11)
    at _renderMatches (react-router-dom.js?v=7652cf65:3167:33)
    at useRoutesImpl (react-router-dom.js?v=7652cf65:3033:25)
    at DataRoutes (react-router-dom.js?v=7652cf65:3422:10)
    at renderWithHooks (react-dom_client.js?v=7652cf65:12171:26)
    at updateFunctionComponent (react-dom_client.js?v=7652cf65:14577:28)
    at beginWork (react-dom_client.js?v=7652cf65:15912:22)
    at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=7652cf65:3674:22)
    at Object.invokeGuardedCallbackDev (react-dom_client.js?v=7652cf65:3699:24)
    at invokeGuardedCallback (react-dom_client.js?v=7652cf65:3733:39)
Show 19 more frames
console.js:213 The above error occurred in the <DataRoutes> component:

    at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7652cf65:3419:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7652cf65:3491:15)
    at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7652cf65:3375:5)
    at Routes (http://localhost:5173/src/routes/index.jsx?t=1712483351401:26:7)
    at AuthProvider (http://localhost:5173/src/provider/authProvider.jsx:21:3)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Это необнаруженная ошибка, но даже при добавлении errorElement в маршруты ошибки все равно сохраняются. Даже тогда я до сих пор не знаю, почему может возникнуть ошибка. Я пытался разобраться в этой проблеме часами, но безуспешно.