Question

我正在使用react-router 2.我的路由被定义为

   <Route path="/" component={App}>
       <IndexRoute component={Home}/>
       <Route path="/about" component={About}/>
       <Route path="/login" component={Login} onEnter={redirectToDashboard}/>
       <Route path="/logout" component={Logout} onEnter={logoutSession}/>
       <Route path="/dashboard" component={Dashboard} onEnter={redirectToLogin}/>
   </Route>

一切正常但我无法从仪表板页面禁用后退按钮。

成功登录后，我将用户重定向到仪表板页面，但当用户点击后退按钮时，它再次进入登录页面。当用户在仪表板页面上时，我想禁用browser的后退按钮。

Answer 1

您最好的选择是，当用户登录时，他/她被重定向到dashbaord。如果由于某种原因用户单击后退按钮，您应该：

如果用户已登录留在页面仪表板上

if(logged) {
  history.pushState(null, null, location.href);
  window.onpopstate = function(event) {
    history.go(1);
  };
}

将无法返回。

Answer 2

无法禁用浏览器按钮。我的建议是，如果他/她已被记录，则将用户重定向回仪表板页面

Answer 3

实际上你无法禁用后退按钮。您可以通过阻止浏览器的“后退”操作来使用黑客攻击。只需在您的Dashboard组件compnentWillMount()生命周期方法中添加一些代码，这些代码将触发浏览器的“转发”操作：

componentWillMount() {
   setTimeout(() => {
     window.history.forward()
   }, 0)
   window.onunload=function(){null};
}

但最有可能更好的解决方案是根据用户登录状态进行一些重定向。

Answer 4

应用所有这些技巧后，我看到url会稍微更改为“ login”，然后更改为“ where-we-push”。相反，我们可以做的是->在api成功登录的情况下，执行：history.replace（'/ Whatever_screen'）。这将从window.history堆栈中删除登录屏幕。

Answer 5

在您要禁用后退的页面上（例如，在LoginApp上）添加此块，以禁用后退Web历史记录

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

Answer 6

在登录屏幕中，将替换添加到/ dashboard

"scripts": {
  "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
  "build": "nuxt build",
  "start": "cross-env NODE_ENV=production node server/index.js"
}

原因是将您当前的路径（/ login）替换为/ dashboard。在添加此内容之前，请确保正确设置身份验证。

Answer 7

为了提高代码的可重用性，我们可以在index.html中添加一个事件侦听器，并从所有componentDidMount()方法中分配浏览器向后禁用事件。

在index.html中，

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

在React componentDidMount()方法中，

componentDidMount() {
   window.dispatchEvent(new CustomEvent("navigationhandler"));
}

Answer 8

无法禁用浏览器按钮。但是我们可以使用 listen()、go() 和 push() 等历史方法来覆盖 react.js 中后退按钮的默认行为。也尝试使用 withRouter()。

以下是执行此操作的示例代码。请查看 componentDidMount() 和 componenetDidUnmount() 方法。

import React from "react";
import { Redirect, Switch, Route, withRouter } from "react-router";

import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";

class App extends React.Component {
  constructor(props) {
    super(props);

    // Store the previous pathname and search strings
    this.currentPathname = null;
    this.currentSearch = null;
  }

  componentDidMount() {
    const { history } = this.props;

    history.listen((newLocation, action) => {
      if (action === "PUSH") {
        if (
          newLocation.pathname !== this.currentPathname ||
          newLocation.search !== this.currentSearch
        ) {
          this.currentPathname = newLocation.pathname;
          this.currentSearch = newLocation.search;

          history.push({
            pathname: newLocation.pathname,
            search: newLocation.search
          });
        }
      } else {
        history.go(1);
      }
    });
  }

  componentWillUnmount() {
    window.onpopstate = null;
  }

  render() {
    return (
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/page1" />} />
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
        <Route path="/page3" component={Page3} />
      </Switch>
    );
  }
}

export default withRouter(App);

欲知更多：Disable react back button

在react-router 2中禁用后退按钮

8 个答案: