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, Feb 12 '15 at 11:41
Thanks for your efforts to fix the question. Get the indentation fixed and I will vote for reopening. — Paulo Scardine, Feb 12 '15 at 22:37
I typically use a [flux architecture](http://facebook.github.io/flux/) for managing async data — Matti John, Feb 12 '15 at 23:31
can you give me example of how to use history Api with flux ?? @MattiJohn — Waleed Kasem, Feb 12 '15 at 23:40
[Here](http://stackoverflow.com/questions/28012356/proper-way-to-initialize-data/28101529#28101529) is a question I answered a few weeks ago about async data using reflux.js (a flux implementation). Instead of rendering your component in the success callback, render the component and have the component listen for data from the AJAX response. You can use local storage if you need the data to still be in the store when you navigate back. — Matti John, Feb 12 '15 at 23:49
Your "object specification" (the argument to `React.createClass`) is not a proper javascript object literal. Please fix it and see if the problem persists. — Paulo Scardine, Feb 13 '15 at 00:11

score 0 · Answer 1 · answered Mar 18 '15 at 18:59

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 Answers1