ReactJS：使用浏览器按钮导航时保存状态

我的应用程序有两个页面，首先是主页，这是一个项目列表，加载了ajax和支持分页。当你点击列表中的一个项目时，它会渲染一个新页面，显示该项目的细节。我使用react-router，它工作正常。ReactJS：使用浏览器按钮导航时保存状态

然而，当我按下后退按钮，我会回到主页，以及所有以前的状态丢失，我不得不再次等待AJAX负载，并失去了分页了。因此，我该如何改进这一点，让页面像一个普通的页面一样工作（当你按下返回按钮时，即使在相同的滚动位置，你也可以立即返回到以前的状态），谢谢。

来源

2015-04-04 wong2

如果您有两个实际的HTML页面，您需要依赖本地存储或仅使用网页。 – WiredPrairie 2015-04-04 12:50:16

@WiredPrairie我只有一个HTML页面 – wong2 2015-04-04 12:51:48

你在哪里存储你的应用程序的状态？什么是第二次触发Ajax请求？ – WiredPrairie 2015-04-04 14:25:21

我已经解决了这个自己通过提供一个模块Store，这是这样的：

// Store.js 

var o = {}; 

var Store = { 
    saveProductList: function(state) { 
    o['products'] = state; 
    }, 
    getProductList: function() { 
    return o['products']; 
    } 
};  

module.exports = Store;

然后在主页组件，负载并保存状态：

componentDidMount: function() { 
    var state = Store.getProductList(); 
    if (state) { 
    this.setState(state); 
    } else { 
    // load data via ajax request 
    } 
}, 

componentWillUnmount: function() { 
    Store.saveProductList(this.state); 
}

这对我有用。

来源

2015-04-20 08:03:32 wong2

啊，这个可怜的人，我喜欢它 – casey 2017-09-25 05:18:33

-1

你应该使用动态路由这样的例子：

<Route name="inbox" handler={Inbox}> 
    <Route name="message" path=":messageId" handler={Message}/> 
    <DefaultRoute handler={InboxStats}/> 
</Route>

如果你改变了MESSAGEID（子组件），你仍然会在收件箱中（父）相同的状态组件。

它会是这个样子：

<Route name="search" path="/search/:query?/:limit?/:offset?" handler={Search} />

来源

2015-04-05 15:51:01

ReactJS：使用浏览器按钮导航时保存状态

回答

相关问题