Reactjs 历史进入反应

Reactjs 历史进入反应,reactjs,react-router,history.js,Reactjs,React Router,History.js,我正在使用历史Api使用ajaxify插件在我的网站中的页面之间切换 这取决于该站点的historyjs。它使用请求只更新页面中的div,而保留其他所有内容(页眉、页脚) 它工作得很好,但在某些页面中使用reactjs组件时,它的工作效果并不好 我使用reactjs从服务器渲染数据,并在页面中表示数据,但当我切换页面时,reactjs不会在页面中重新加载内容,但会给我一个空白页面 如何将历史记录放入react,并使react在每次获取页面时重新获取内容 我下载了react-devtool for

我正在使用历史Api使用ajaxify插件在我的网站中的页面之间切换 这取决于该站点的historyjs。它使用请求只更新页面中的div,而保留其他所有内容(页眉、页脚)

它工作得很好,但在某些页面中使用reactjs组件时,它的工作效果并不好

我使用reactjs从服务器渲染数据,并在页面中表示数据,但当我切换页面时,reactjs不会在页面中重新加载内容,但会给我一个空白页面

如何将历史记录放入react,并使react在每次获取页面时重新获取内容

我下载了react-devtool for chrome,我意识到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)
    });

当我加载主页时,React代码工作得很好,但当我导航并返回主页时,它会给我一个空白页面,因此如何重新呈现React?

如果您希望依赖React,则不应使用ajaxify插件

相反,您应该考虑使用像Paj.js这样的简单路由器,并编写一条通过Ajax获取数据并使其具有反应性的路由。


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

为了帮助您,您需要添加一些不起作用的具体示例。向我们展示重现该问题所需的最低代码。我更新了@wiredpariethanks帖子,感谢您为解决该问题所做的努力。修复缩进,我将投票支持重新打开。我现在能做什么@PauloScardineI通常使用
       $(document).ready(function() {
         $("#r_sec").ajaxify({
          previewoff: true, 
          fade: 500,
          inline:false,
          selector : ".nav_ul a"});});