Question

我正在使用react路由器构建一个单页应用程序。现在，一切都很好，除了记住以前的状态。我的意思是：每当用户在选择dom中选择一个选项，然后单击链接组件以跳转到另一个路径路径;那么，如果这个用户点击浏览器的后退按钮返回上一页，他就看不到他以前的选择，一切都输了！

Answer 1

您正在谈论的所需行为是关于保存组件的状态。即使路由器呈现所需的组件，它也不会保存该组件的状态。但是，您可以通过URL参数传递所需的状态，但由于您正在尝试实现的目标，这不适合您的解决方案。

通过URL传递数据以实现状态可能听起来不错，但由于用户选择不同选项时必须更新URL，这将无法工作，这将触发新的渲染。这将发生，因为您目前正在该路线上。

//the route path can be defined like this:
localhost:123/#/userselection/:selectedid

When you navigate it will look something like this
localhost:123/#/userselection/1
localhost:123/#/userselection/2
localhost:123/#/userselection/3
etc.

//Now if you are on 
localhost:123/#/userselection/2

and the User changes to selectionid 3, you will have to trigger a render 
which is not usually desired behaviour

一个想法可能是在应用程序的根级别声明某种ComponentStateService。使用此服务设置和读取所需的状态。因此，当用户选择某些内容时，请拥有一个带有组件名称的对象及其stateData。

export default class ComponentStateService{
    _stateData = {};

    constructor(defaultState = null){
        if (defaultState){
            this._stateData = defaultState;
        }        
    }

    getComponentStateData(componentName){
        if (this._stateData){
            return this._stateData[componentName];
        }

    }

    setComponentStateData(componentName, stateData){
        this._stateData[componentName] = stateData;
    }
}

然后在高级别初始化它：

import ComponentStateService from './componentStateService';

var componentState = new ComponentStateService(//default state passed in here);
export default componentState;

然后使用它，将其导入每个组件

import componentState from '../index';

// call this to set the state
componentState.setComponentStateData("component1", {});
// and retrieve state
let savedState = componentState.getComponentStateData("component1");

然后根据需要检索或更新。您可以使用响应的LifeCycle Hooks，以便在Comopnent渲染之前读取和设置数据。此外，您还需要确保在用户更改其选择时正确更新状态数据。

正如您所看到的，主要的缺陷是您无法共享您的链接并希望其他人看到您看到的内容，因为它将在用户浏览器会话中保留。

您可以创建一个导入它的基类，这样您就不必每次都导入它。

您还可以将整个状态转储到本地存储，以便它在会话之外持续存在，并在应用启动时加载

如何记住反应路由器中的用户选择？

1 个答案: