Question

我正在使用react-router-dom v4并能够使用“props.history.location”中的push(path, state)和replace(path, state)方法将自定义数据发送到新屏幕

我想将数据发送回上一个屏幕但无法使用go(n)或goBack()或goForward()。

当我需要将数据发送回上一个屏幕时，如何解决方案？

Answer 1

goBack() or go(-1)用于返回上一个历史记录条目。如果要将新数据发送到上一个路由，也可以使用history.push({pathname: prevPath, state: {data: 1}});

prevPath是您使用nextRoute传递给location state的内容。

Answer 2

由于安全原因，您要问的内容很复杂。该应用程序不应该知道有人单击“后退”会发生什么，因此您也不应该在该状态下进行操作。

但是

前进的方式：

您可以实现以下用例：/create->单击下一步-> /summary/{ID}->单击后退-> {{ 1}}

通过点击下一个时“准备”上一条路线：

/edit/{ID}

这同样适用于您的应用内后退按钮和浏览器的后退按钮。

或

可能的解决方法

onClickNext = () => {
  history.replace(`/edit/${id}`);
  history.push(`/summary/${id}`);
}

到目前为止，history.goBack(); setTimeout(() => history.replace(`...`), 10);毫秒在浏览器中一切正常（10或0等较低的超时时间还不够）

这将开始渲染不需要的网站，并可能引发一些不需要的副作用
可能是笨拙的，可能会将用户（使用速度较慢的设备或其他设备）放在历史记录的“ goBack（）”位置上，因此，如果您想使用此方法，请计入这种风险
不适用于浏览器的后退按钮（这是程序化后退按钮的问题，但可以通过例如“提交操作”操作，它会将您移回历史记录，但会转到特定的路径）
类似于使用1和history.go(-2)，选择是你的。

Answer 3

我遇到了同样的问题，但我没有找到任何官方建议来实现这一点，以下是我的解决方法。在下面的代码片段中，我跟踪历史堆栈中的位置（因为没有直接的方法来获取历史堆栈）

import {Switch, useHistory} from 'react-router-dom';
import { Action, History, Location } from "history";
const history = useHistory();
const locations = [];
locations.push(history.location);//since the first location is not passed to the listener we have to initialize the locations like this to keep record of the first page that user loads
history.listen((location: Location, action: Action) => {
        if (Action.Push == action) {
            locations.push(location);
        } else if (Action.Pop == action) {
            locations.pop();
        } else if (Action.Replace == action) {
            locations.pop();
            locations.push(location);
        }
    })

然后我编写以下返回方法，该方法接收将传递到上一页的有效负载。

import _ from 'lodash'; 
export const back = (state) => {
    if (!history) {
        throw 'History was not set';
    }
    const uniqueLocations = _.uniqBy(locations, (l: Location) => l.key);//for some reason there will be duplicates in the locations array, using uniqBy method of lodash, we can remove the duplicates
    
    if (uniqueLocations.length >= 2) {
        const targetLocation = uniqueLocations[uniqueLocations.length - 2];
        history.go(-1);
        history.push({
            ...targetLocation,
            state: {
                ...targetLocation.state,
                backState: state,
            }
        })
    }
}

现在调用 back() 方法会将 back 方法的 state 参数传递给上一个屏幕，可以像这样访问：props.location.state.backState 在上一个屏幕中。

Answer 4

使用替换而不是推送。

如何在反应路由器goBack方法中发送自定义数据，如推送和替换方法？

4 个答案: