React Router报错：Cannot read properties of undefined (reading 'pathname')求助

我遇到了错误「Cannot read properties of undefined (reading 'pathname')」，但我并未使用pathname变量，且错误提示该问题出自react-router-dom的Router组件。

以下是项目相关代码文件：

index.js: #

import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import "react-toastify/dist/ReactToastify.css";
import App from "./App";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import allReducers from "./reducers/allreducers";
import thunk from "redux-thunk";
import { getEducations } from "./actions/educationAction";
import { getExperiences } from "./actions/experienceAction";
import { getprojects } from "./actions/projectAction";
import { getSkills } from "./actions/skillAction";
import api from "./apis/serverApi";

const store = configureStore({
  reducer: allReducers,
  middleware: [thunk],
  devTools: process.env.NODE_ENV !== "production",
});

store.dispatch(getEducations());
store.dispatch(getExperiences());
store.dispatch(getprojects());
store.dispatch(getSkills());

const user = JSON.parse(localStorage.getItem("userData"));

if (user !== null) {
  api.defaults.headers.common["Authorization"] = `Bearer ${user.token}`;
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

App.js: #

import React, { useState, useEffect } from "react";
import { Router, Route, Routes } from "react-router-dom";
import { useSelector } from "react-redux";
import PortfolioUI from "./pages/PortfolioUI";
import Login from "./components/User/Login/Login";
import SideBar from "./components/Admin/SideBar/SideBar";
import EducationAdmin from "./pages/EducationAdmin";
import { ToastContainer } from "react-toastify";
import history from "./shared/history";
import SecureRoute from "./shared/SecureRoute";
import ExperienceAdmin from "./pages/ExperienceAdmin";
import SkillAdmin from "./pages/SkillAdmin";
import MessageAdmin from "./pages/MessageAdmin";
import isLogin from "./shared/authorization";
import ProjectAdmin from "./pages/ProjectAdmin";
import NotFound from "./pages/NotFound";

function App() {
  const [isLogged, setIsLogged] = useState(isLogin);
  const login = useSelector((state) => state.login.isLogin);

  useEffect(() => {
    setIsLogged(isLogin);
  }, [login]);

  return (
    <div className="App">
      <Router history={history}>
        {isLogged && <SideBar />}
        <Routes>
          <Route path="/login" exact component={Login} />
          <SecureRoute path="/education" exact component={EducationAdmin} />
          <SecureRoute path="/experience" exact component={ExperienceAdmin} />
          <SecureRoute path="/project" exact component={ProjectAdmin} />
          <SecureRoute path="/skill" exact component={SkillAdmin} />
          <SecureRoute path="/messages" exact component={MessageAdmin} />
          <Route path="/" exact component={PortfolioUI} />
          <Route path="*" component={NotFound} />
        </Routes>
      </Router>
      <ToastContainer
        position="top-right"
        autoClose={1000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
    </div>
  );
}

export default App;

secureRouter.js: #

import React, { useState } from "react";
import { Route, useNavigate } from "react-router-dom";
import isLogin from "./authorization";

const SecureRoute = (props) => {
  const [isLogged] = useState(isLogin);
  const navigate = useNavigate();

  if (!isLogged) {
    navigate("/", { state: { from: props.location }, replace: true });
    return null; // or a loading indicator, etc.
  }

  return <Route path={props.path} element={<props.component {...props} />} />;
};

export default SecureRoute;

serverApi.js: #

import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:8080",
});

export const setAuthorizationToken = (token) => {
  if (token) {
    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
  } else {
    delete axios.defaults.headers.common["Authorization"];
  }
};

export default api;

export const domainName = "http://localhost:8080/";

educationApi.js: #

import api from "./serverApi";

export const addEducationApi = (education) => {
  return api.post("/educations/", education);
};

export const getEducationsApi = () => {
  return api.get("/educations/");
};

export const deleteEducationApi = (educationId) => {
  return api.delete(`/educations/${educationId}`);
};

export const updateEducationApi = (educationId, education) => {
  return api.put(`/educations/${educationId}`, education);
};

experienceApi.js: #

import api from "./serverApi";

export const addExperienceApi = (experience) => {
  return api.post("/experiences/", experience);
};

export const getExperiencesApi = () => {
  return api.get("/experiences/");
};

export const deleteExperienceApi = (experienceId) => {
  return api.delete(`/experiences/${experienceId}`);
};

export const updateExperienceApi = (experienceId, experience) => {
  return api.put(`/experiences/${experienceId}`, experience);
};

messageApi.js: #

import api from "./serverApi";

export const getMessagesApi = () => {
  return api.get("/messages/", {
    headers: {
      Authorization: `Bearer ${
        JSON.parse(localStorage.getItem("userData")).token
      }`,
    },
  });
};

export const updateMessageApi = (messageId, message) => {
  return api.put(`/messages/${messageId}`, message);
};

projectApi.js: #

import api from "./serverApi";

export const addProjectApi = (project) => {
  return api.post("/projects/", project);
};

export const getProjectsApi = () => {
  return api.get("/projects/");
};

export const deleteProjectApi = (projectId) => {
  return api.delete(`/projects/${projectId}`);
};

export const updateProjectApi = (projectId, project) => {
  return api.put(`/projects/${projectId}`, project);
};

skillApi.js: #

import api from "./serverApi";

export const addSkillApi = (skill) => {
  return api.post("/skills/", skill);
};

export const getSkillsApi = () => {
  return api.get("/skills/");
};

export const deleteSkillApi = (skillId) => {
  return api.delete(`/skills/${skillId}`);
};

export const updateSkillApi = (skillId, skill) => {
  return api.put(`/skills/${skillId}`, skill);
};

userApi.js: #

import api from "./serverApi";

export const loginApi = (authData) => {
  return api.post("/users/login", authData);
};

history.js: #

import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default history;

我是React新手，卡在这个问题上了，希望能帮忙排查并解决该错误。如果需要其他文件，请告知。

内容的提问来源于stack exchange，提问作者user21744021