在ReactJS中使用HashRouter时，页面刷新时未定义this.props.location.state

Question

我有啤酒列表页面，然后单击任何项​​目 打开详细信息页面。

详细信息页面中的数据通过

<script>
jQuery(document).ready(function() {
    jQuery('.publication-slide-container .tab-links a').on('click', function(e) {
        var currentAttrValue = jQuery(this).attr('href');


           jQuery('.publication-slide-container ' + currentAttrValue).show().siblings().hide();

            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });

 // below is my code.
      jQuery('.publication-slide-container .tab-content .publication-slide').each(function() {
        if (!jQuery(this).text().trim()) {   // empty .publication-slide
          jQuery('.publication-slide-container .tab-links')
            .find('a[href="#' + jQuery(this).attr('id')+'"]').parent().remove();   // remove related <li></li>
        }
    });
});
</script>

在详细信息页面上

刷新详细信息页面时，this.props.location.state未定义

在ReactJS中使用HashRouter时，页面刷新时未定义this.props.location.state，但使用browserRouter时页面刷新会保留数据

Answer 1

在代码示例中，Link组件中有一个双引号。

关于使用HashRouter和location.state的文档规定如下：

  

哈希历史记录不支持location.key或location.state。在   以前的版本中，我们试图对行为进行匀称，但是有   我们无法解决的极端情况。任何需要此的代码或插件   行为将不起作用。由于此技术仅旨在支持   旧版浏览器，我们建议您配置服务器以使其正常运行   代替。

https://reacttraining.com/react-router/web/api/HashRouter

如前所述，它与BrowserRouter一起使用。除非您特别需要支持较旧的浏览器，否则应使用使用HTML5历史记录API的BrowserRouter。