Question

如果用户导航到 www.example.com/one 并单击“后退”按钮，我想将其重定向到 www.example.com 。

我认为这是一个普遍的问题，但是我还没有找到解决方案。

Answer 1

您想要的是什么

假设某人访问了您网站上的单个页面，例如：www.yoursite.com/category/books/romeo-and-juliet

在此页面中，您想要显示一个“后退”按钮，该按钮将您链接到一个上层目录，即：www.yoursite.com/category/books /

这是我们在vBulletin论坛等中著名的面包屑系统。

这是一个基本的解决方案：

let url = window.location.href;
let backButtonUrl = "";
if (url.charAt(url.length - 1) === "/") {
  backButtonUrl = url.slice(0, url.lastIndexOf("/"));
  backButtonUrl = backButtonUrl.slice(0, backButtonUrl.lastIndexOf("/"));
} else {
  backButtonUrl = url.slice(0, url.lastIndexOf("/"));
}

它的基本作用是： 1.从浏览器获取当前URL 2.检查链接末尾是否有“ /”（斜杠）。一种。如果存在：删除斜杠，并删除最后一个斜杠的所有内容 b。如果没有，请删除所有最后一个斜杠。

您可以将{backButtonUrl}用作“返回”按钮链接。

注意：它与React Router，历史记录等无关。注意2：假设您使用的链接架构类似于www.site.com/word/letter/character

如果您想将其与react-router-dom库一起使用，则需要这样设置url变量：

let url = this.props.match.url;

Answer 2

您可以尝试两个选项，可以使用路由器历史记录中的push方法或goBack方法。通常，如果您通过Route方法直接路由组件或将历史道具传递给子组件并使用它，则可以使用历史道具。

下面提供了示例代码

this.props.history.push('/') //this will go to home page

or

this.props.history.goBack() //this will go to previous page

对于您的问题，请尝试使用push方法，并提供继续进行操作的确切网址。

有关更多参考，请访问https://reacttraining.com/react-router/web/api/history

Answer 3

浏览器后退按钮可用于您的路线历史记录。它不会调用您以编程方式处理的路由。这就是我们应该使用React Router保持历史堆栈的关键所在。如果您在路线'/'上，然后按'/home'。在浏览器后退按钮上，它将弹出'/home，并返回到'/'。

即使您实现了Button组件以返回功能并使用React Router history props。相信我，您必须仔细管理导航，以适当维护浏览器历史记录堆栈。因此，其行为就像您按下浏览器的后退按钮或应用程序Button返回或前进一样。我希望这会有所帮助。

Answer 4

我找到了解决方案。它不漂亮，但是可以用。

class Restaurant extends Component {
    constructor(props) {
        super(props);
        this.props.history.push('/');
        this.props.history.push(this.props.match.url);
    }
    ...

Answer 5

挂钩版本（反应16.8 +）：

最低版本。

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

export const Item = () => {
    let history = useHistory();
    return (
        <>
          <button onClick={() => history.goBack()}>Back</button>
        </>
    );
};

Answer 6

我今天遇到了同样的问题。我正在处理的应用程序之一中有以下流程：

用户填写注册表
用户进入信用卡“支付页面”
付款成功后，用户会看到“付款确认”页面。

我想阻止用户从“付款确认”(3) 页面返回到付款流程中的任何先前步骤（1 和 2）。

最好的做法是不要使用路由来控制显示哪些内容，而是使用状态。如果你负担不起，我找到了两种实用的方法来解决这个问题：

使用 React-Router：

当您点击后退按钮时，React Router 的历史对象将如下所示：

当您使用 history.push 访问任何页面时，记录您正在访问的页面的状态
围绕 React-Router 的 Route 组件创建装饰器、HOC 或您喜欢的任何类型的包装器。在此组件中：如果 history.action === "POP" 和 "history.state.lastVisited === <some page with back navigation disabled>"，那么您应该使用 history.replace

另一种方法是直接转到 /home 页面：使用 history.action 检测是否使用了后退按钮，然后：

将 location.href 更改为您要访问的页面
致电location.reload()。这将重新加载应用程序，并重置历史记录

Answer 7

我们希望我们的 React 应用程序有类似的东西，不幸的是，这是我们想出的最佳解决方案。当我们的用户使用移动设备并通过广告或 referrer 访问我们网站上的特定页面时，这尤其有用。

这在我们的主 routes.tsx 文件中。

 useEffect(() => {
    // The path that the user is supposed to go to
    const destinationPath = location.pathname;

    // If our site was opened in a new window or tab and accessed directly
    // OR the page before this one was NOT a page on our site, then...
    if (
      document.referrer === window.location.href ||
      document.referrer.indexOf(window.location.host) === -1
    ) {
      // Replaces the current pathname with the homepage
      history.replace("/");

      // Then pushes to the path the user was supposed to go to
      history.push(destinationPath);
    }
  }, []);

现在，当用户按下后退按钮时，它会将用户带到我们的主页，而不是停留在他们所在的“嵌套”路线中。

注意：此实现有一些小问题。我们的应用程序也是 Cordova 应用程序，因此我们需要有自己的后退按钮。此实现与我们自己的后退按钮配合良好，但似乎不适用于本机浏览器的后退按钮；因此，它可以很好地满足我们的需求。

使用React Router处理后退按钮

7 个答案: