如何在不清除 URL 当前地址的情况下禁用返回按钮

Question

我为此尝试了几种变体：
他们都不是我需要的，有些只是放手。
如何防止用户在重定向到http://localhost:3000/home 后返回，但 URL 必须保持在“/home”，并且用户不应该能够通过手动更改地址栏进行导航。
（实际上阻止了重新注册）

这些是我从其他人的问题中检查的示例。 这些都不起作用。

useEffect(() => {  //Non of these worked
 window.history.replaceState(null, null, '/');

 Or

 window.addEventListener('popstate', () => {
      history.go(1);
    });

Or

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

Or 

  window.onpopstate = function () {
    history.pushState(null, null, window.location.href);
    history.go(1);
}, []);`

在这些之后，最后一个地址可能会保持signup/mobile，然后返回会给出一个混合 - 一个缺少按钮/CSS的错误地址。

Answer 1

你可以创建一个 react-router Guard 来阻止用户在认证后访问登录组件，这意味着认证组件需要被条件保护。

示例：

import React from 'react';
import { Route, Redirect } from "react-router-dom";

const GuardedRoute = ({ component: Component, auth, ...rest }) => (
    <Route {...rest} render={(props) => (
        auth === true
            ? <Redirect to='{location.pathname}' />
            : <Component {...props} />
    )} />
)

export default GuardedRoute

受How to create guarded routes for your React-App启发的答案