如何防止用户返回 react-router v6？

Question

我正在使用 react-router-dom 在我的 ReactJS 应用程序中进行路由。我想阻止用户在登录后返回，即我不希望用户在登录后点击浏览器上的后退按钮时再次返回登录屏幕。

或者另一个例子是当用户点击注销按钮时，我不希望用户在注销后能够导航回主应用程序。

我能找到的大多数其他问题都已过时，不再适用于 react-router v6。

也许我想以某种方式从 react-router-dom 的历史记录中删除 object？

我想除了让我设置isLoggedIn状态并检查之外，一定有react-router提供的方法吧？

Answer 1

您可以根据条件（例如：用户是否登录）创建一组不同的路由，然后为每个条件创建一个默认重定向路由。要创建此集合，您必须知道在什么状态下可以访问哪些路由，例如，未经授权的用户无法导航到包含任何创建、删除或更新操作的路由，如果用户尝试访问此类路由，他们应该被重定向到默认路由，如登录页面。同样，授权用户不应该能够访问 login/signup 路由。您可以像下面这样构造您的代码，这是关于身份验证状态的，但您也可以自由使用任何其他条件：

在您的主要组件中（通常是 App.js/App.tsx 您定义路由的地方）

let routes;
if(loggedIn){
    
    routes = (
      <Routes>
          <Route path='/' element={<HomePage/>}/>
          <Route path='/groups' element={<Groups/>}/>
          <Route path='/some/other/route/:id' element={<AuthCompN/>}/>
          <Route path='*' element={<Navigate to ='/'/>}/>
      </Routes>
    )
  }
  else{
      routes = (
      <Routes>
        <Route path='/auth' element={<Login/>}/>
        <Route path='*' element={<Navigate to="/auth"/>}/>
      </Routes>
    )
  }

  return (
    <BrowserRouter>
      <div className="fixed w-full h-full">
        {isLoggedIn&&<Navbar />}

        {routes}
        

      </div>
    </BrowserRouter>
  );

正如我们所见，变量routes根据登录状态分配了不同的路由集。路径标记为 * 的最后一条路径是除上面定义的路径之外的任何其他路径，因此如果用户登录并尝试访问或返回到 /login 路径，他们将被重定向到呈现主页组件或类似内容的路线。当用户未登录并尝试访问受保护的路由时，同样的逻辑适用。

Answer 2

试试这个

componentDidUpdate() {
  window.addEventListener('popstate', function(event) {
    window.history.pushState(null, document.title, window.location.href);
  });
}

您可以在这里找到完整的答案：How to prevent user from going back in react-router-dom?

Answer 3

不要更改默认的浏览器后退按钮行为。如果您不想让用户在成功验证后 导航回登录页面，请使用重定向到 REPLACE 历史堆栈上的当前条目，而不是 PUSH 新条目。

示例：

const navigate = useNavigate(); ... const loginHandler = () => { ... authentication business logic ... // if authenticated navigate(targetPath, { replace: true }); // redirect!!! };

从这里开始，如果用户按下后退按钮或发出后退导航，他们将导航回到他们所在的路径 prior 导航到登录路径。

这实际上是处理受保护路由和身份验证的标准约定。参见。

如何防止用户返回 react-router v6？

How to prevent user from going back in react-router v6?

reactjs

react-router