如何使用React Router刷新页面？

Question

我想在点击时使用React Router刷新页面。

我知道，我可以使用window.location.reload();

但是我想使用一些React Router的魔法。有没有一种方法可以使用React Router刷新页面，还是应该使用window对象的普通方法？

- huhWell

---

你希望刷新页面能够实现什么？真正的浏览器刷新会重新加载页面（可能部分从缓存中加载），在路由器内进行的刷新可能会根据组件的设置重置一些组件状态。 - DBS

@DBS 假设我需要刷新页面以重复数据库查询。 - huhWell

这个回答解决了您的问题吗？如何使用 react-router 重新加载页面？ - Enfield Li

Answer 1

如果您正在使用 react-router v6，则尝试以下方法（以此为例），它可能有效！

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const refreshPage = () => {
  navigate(0);
}

如果你正在使用旧版本，则尝试这个方法！

只需在你的路由器上添加此属性，每当你进入新路径时，它将强制页面重新加载。

<Router forceRefresh={true}>

- Priyen Mehta

---

没有对我起作用。 - ANimator120

Answer 2

您可以使用

App.js

import React from "react";
import { Routes, Route, BrowserRouter } from "react-router-dom";
import ProtectedRoute from "./components/ProtectedRoute";

import Login from "./pages/Login";
import Keywords from "./pages/Admin/Modulos/Keyword";
import MainPage from "./pages/MainPage";

function App() {

  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route
            path="/ingresar"
            element={<Login />}
          ></Route>
        
          <Route
            element={
              <ProtectedRoute
                isAllowed={true}
                redirectTo="/ingresar"
              ></ProtectedRoute>
            }
          >
            <Route path="/admin/keyword" element={<Keywords />}></Route>

          </Route>

          <Route path="*" element={<MainPage />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

ProtectedRoute.js

import { Navigate, Outlet, useLocation } from "react-router-dom";

export default function ProtectedRoute({
  children,
  isAllowed,
  redirectTo = "/ingresar",
}) {
  const location = useLocation();

  if(location.state!=undefined){
    console.log("hola748")
    return <Navigate to={location.state} replace></Navigate>;
  }
  if (!isAllowed) {
    return <Navigate to={redirectTo} replace></Navigate>;
  }

  return children ? children : <Outlet />;
}

并且要刷新（从Keywords.js中）使用

navigate("/admin/keyword",{state:"/admin/keyword"});

- LQuagmire