History into react

Question

I am using History Api to switch between pages in my website using the ajaxify plugin that depends on historyjs from this site http://4nf.org/. It's using requests just to update only div in page and leave everything else (header,footer).

It works so well, but when using reactjs components in some pages it doesn't work so well.

I am using reactjs to render data from the server and represent it in the page but when I switch pages react doesn't reload content in a page but it gives me a blank page.

How to get history into react and make react re-fetch content again every time I get the page?

I downloaded react devtool for chrome and I recognized that the react component still in can i unmount and remount react every time the page changes !!?

React code:

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)
    });

and this code to navigate between pages.

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

React code works so well when I load the homepage but when I navigate and return to the home page it gaves me a blank page so how can I re-render react?

You'll need to add some specific examples of what's not working in order to help you. Show us the minimum code necessary to reproduce the problem. — WiredPrairie
Thanks for your efforts to fix the question. Get the indentation fixed and I will vote for reopening. — Paulo Scardine

Naman Goel Naman Goel · Accepted Answer · 2015-03-18T18:59:07

You shouldn't use the ajaxify plug-in if you want to rely on React.

Instead, you should consider using a simple router like page.js and writing a single route that fetched data via AJAX and renders it with React.

The problem with the Ajaxify plugin is that it uses jQuery for rendering content and now React and jQuery are both fighting for control over the DOM.

History into react

1 Answers