历史成反应答案

【问题标题】：History into react历史成反应
【发布时间】：2015-04-12 18:44:24
【问题描述】：

我正在使用 History Api 使用 ajaxify 插件在我的网站中的页面之间切换这取决于来自该站点http://4nf.org/ 的historyjs。它使用请求仅更新页面中的 div 并保留其他所有内容（页眉、页脚）。

效果很好，但是在某些页面中使用 reactjs 组件时效果不佳。

我正在使用 reactjs 从服务器呈现数据并在页面中表示它，但是当我切换页面时，react 不会重新加载页面中的内容，而是给我一个空白页面。

如何在每次获取页面时将历史记录到 react 中并让 react 重新获取内容？

我下载了用于 chrome 的 react devtool，我发现 react 组件仍在，我可以在每次页面更改时卸载并重新安装 react ！！？

反应代码：

var Postlist = React.createClass({
    getInitialState: function () {
        socket.on("new",this.Updatepost);
        return {posts: [], hasMore: true, onView: 5};
    },
    componentWillMount: function () {
        this.state.posts.push(this.props.newposts);
        this.setState({posts: this.props.newposts});
    },
    $.ajax({
        url: 'load_posts.php',
        dataType: 'json',
        success: function (data) {
            var x = data;
            React.render(<Postlist newposts={x} />,document.getElementById("main"));
        }.bind(this),
        error: function (xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });

这个代码在页面之间导航。

       $(document).ready(function() {
         $("#r_sec").ajaxify({
          previewoff: true, 
          fade: 500,
          inline:false,
          selector : ".nav_ul a"});});

当我加载主页时，React 代码运行良好，但是当我导航并返回主页时，它给了我一个空白页面，那么我该如何重新渲染 react？

【问题讨论】：

您需要添加一些无效的具体示例，以便为您提供帮助。向我们展示重现问题所需的最少代码。
我更新了@WiredPrairie 的帖子
感谢您为解决问题所做的努力。修复缩进，我会投票支持重新开放。
我现在能做什么？？ @PauloScardine
我通常使用flux architecture 来管理异步数据

标签： reactjs react-router history.js

【解决方案1】：

如果你想依赖 React，你不应该使用 ajaxify 插件。

相反，您应该考虑使用像 page.js 这样的简单路由器，并编写一个通过 AJAX 获取数据并使用 React 呈现的单一路由。

Ajaxify 插件的问题在于它使用 jQuery 来呈现内容，现在 React 和 jQuery 都在争夺对 DOM 的控制权。

【讨论】：