当我刷新页面时，React Router Dom 重定向到主页，如何避免这种情况？

如何解决当我刷新页面时，React Router Dom 重定向到主页，如何避免这种情况？

就像问题所说的那样。我有一个完整的 MERN 应用程序，每当我刷新页面时，它都会将我带到仪表板“/dashboard”页面。我不希望这种情况发生。我曾尝试使用 HashBrowser，但没有成功。我真的找不到解决方案......所以我在这里问！

这是代码

我的 App.jsx

import "./App.css";
import LandingPage from "./Pages/LandingPage";
import { AddTicket } from "./Pages/AddTicket/AddTicket";
import { TicketList } from "./Pages/TicketList";
import { Dashboard } from "./Pages/Dashboard/Dashboard";
import { TicketPage } from "./Pages/TicketPage/TicketPage";
import { BrowserRouter,Switch,Route,withRouter } from "react-router-dom";
import { PrivateRoute } from "./Components/PrivateRoutes/PrivateRoute";
import { TransitionGroup,CSSTransition } from "react-transition-group";

const AnimatedSwitch = withRouter(({location}) => (
  <TransitionGroup>
    <CSSTransition key = {location.key} classNames = "slide">
  <Switch location = {location}>
  <Route exact path="/">
    <LandingPage />
  </Route>
  <PrivateRoute path="/dashboard">
    <Dashboard />
  </PrivateRoute>
  <PrivateRoute path="/add-ticket">
    <AddTicket />
  </PrivateRoute>
  <PrivateRoute path="/ticket-list">
    <TicketList />
  </PrivateRoute>
  <PrivateRoute path="/ticket/:ID">
    <TicketPage />
  </PrivateRoute>
</Switch>
</CSSTransition>
</TransitionGroup>
));




function App() {

  return (
    <div className="App">
      <BrowserRouter>
       <AnimatedSwitch />

      </BrowserRouter>
    </div>
  );
}

export default App;

我的 PrivateRoute.jsx

import React,{ useEffect } from "react";
import { Route,Redirect } from "react-router-dom";
import { loginSuccess } from "../Login/LoginSlice";
import { useSelector,useDispatch } from "react-redux";
import { fetchNewAccessToken } from "../../api/userAPI";
import { getUserProfile } from '../../Pages/Dashboard/UserActions';
import { DefaultLayout } from "../Layout/DefaultLayout";

export const PrivateRoute = ({ children,...rest }) => {
  const dispatch = useDispatch();
  const { isAuth } = useSelector((state) => state.login);
  const { user } = useSelector((state) => state.user);

  useEffect(() => {
    const updateAccessJWT = async () => {
      const result = await fetchNewAccessToken();
      result && dispatch(loginSuccess());
    };
    !user._id && dispatch(getUserProfile())
    !sessionStorage.getItem("accessJWT") && localStorage.getItem("crmSite") && 
    updateAccessJWT();

   !isAuth && sessionStorage.getItem("accessJWT") && dispatch(loginSuccess());
  },[dispatch,isAuth,user._id]);

  return (
    <Route
      {...rest}
      render={() =>
        isAuth ? <DefaultLayout>{children}</DefaultLayout> : <Redirect to="/" /> 
      }
    />
  );
};

这是我的 LoginSlice.jsx

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  isLoading: false,isAuth: false,error: "",};

const loginSlice = createSlice({
  name: "login",initialState,reducers: {
    loginPending: (state) => {
      state.isLoading = true;
    },loginSuccess: (state) => {
      state.isLoading = false;
      state.isAuth = true;
      state.error = "";
    },loginFail: (state,{ payload }) => {
      state.isLoading = false;
      state.error = payload;
    },},});

const { reducer,actions } = loginSlice;

export const { loginPending,loginSuccess,loginFail } = actions;

export default reducer;

任何帮助将不胜感激！这是部署前需要修复的最后一件事。