Question

我有一个类似这样的组件（简化版）

import React, {Fragment, useEffect, useState} from 'react';
import {Link, useHistory, useParams} from 'react-router-dom';

const MyComponent = () => {
  let history = useHistory();

  const handleGoBack = () => {
    console.log('going back...');
    history.go(-1); // or history.goBack();
  };

  return (
    <Fragment> 
      <Link to="#" onClick={handleGoBack}>&lt; Back</Link>
    </Fragment>
  );
}

它在chrome中可以正常工作。在Firefox和Safari中根本无法使用。控制台显示出handleGoBack函数已按预期方式调用，但history.goBack仅在chrome上执行。有什么想法吗？

Answer 1

问题不在您提供的代码中，而在其他地方。我根据您的代码段创建了Codesandbox，并且history.go(-1)在最新版本的Firefox和Safari中正常工作

Answer 2

我只是面临完全相同的问题。因此，在您的代码中，您正在放置这样的链接：

<Link to="#" onClick={handleGoBack}>&lt; Back</Link>

我在firefox中看到了它，将其渲染为锚标签，该标签的url为当前url。因此，我只是用一个按钮替换了Link并像往常一样处理了onclick事件，它就像一个魅力一样。

Answer 3

这是使用React Router时对我有用的： history.goBack（）有效，但是我必须检查“ /”并在达到该值时停止。历史计数业务无效，因此我不得不搜索“ /”路径以知道何时隐藏/禁用“ <”后退按钮。

import React  from "react";
import { withRouter } from "react-router";
import { NavBar, Icon } from "antd-mobile";
import MainSearchContainer from "../components/MainSearchContainer";
import { render } from "@testing-library/react";

function PageHeader({location, history, db}) {
   const appTitle = "My App";

   return (
      <React.Fragment>
         <NavBar
            icon={location.pathname !== "/" ? <Icon type="left" /> : ""}
            onLeftClick={() => { history.goBack(); render(); } }
            mode="dark"
            rightContent={[<Icon key="1" type="ellipsis" />]}
         >
            {appTitle}
         </NavBar>
         <MainSearchContainer db={db} history={history} />
      </React.Fragment>
   );
}

export default withRouter(PageHeader);

react-router-dom history.goBack（）在Firefox和Safari上不起作用

3 个答案: