Question

我正在将react-router和redux-simple-router与服务器端呈现结合使用，当我导航到类似的URL时：

<div id="inputs">
    <input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topbanner' /> <span class='at-radio-label'>topbanner</span>
    <input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='undermenu' /> <span class='at-radio-label'>undermenu</span>
    <input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topstring' /> <span class='at-radio-label'>topstring</span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">
    var fruit = ["111", "222", "333"];
    for ( var i = 0, l = fruit.length; i < l; i++ ) {
        $('#inputs span').eq(i).html(fruit[i]);
    }
</script>

我希望能够从请求中提取routeActions.push({ pathname: '/main', state: 'some_state'});，以便我可以呈现初始redux状态并将其发送回客户端。如何从服务器端的请求中提取状态？历史和反应路由器把它放在哪里？

这对于移动设备尤为重要，因为我测试的桌面不会触发单独的请求，但移动设备会这样做，这意味着页面会以新的初始状态重新加载。

Answer 1

state对应于state in the History API - 它与当前位置相关联，但它仅在客户端上可用，因此如果您的应用需要支持服务器端呈现，则不适合传递任意数据

如果您希望它在服务器上可用，您需要将其作为URL的一部分。也许是一个查询字符串。

旁边：位置状态在isomorphic / universal应用程序中以其他方式很有用，例如传递要使用onEnter挂钩处理的POSTed表单数据，或传递表单数据和验证错误，通过在同一场景中呈现无效表单来使用重定向转换进行响应。

在URL中提取React Router状态

1 个答案: