Reactjs with history

Question

I am trying to handle history with reactjs, in such a way that the browser back and forward buttons work intuitively. Is there any examples of this, or general guidelines I should be following?

Thanks!

Answer 1

It's not too much different than how you would handle history without React.js. What works well for me is this: I have a top-level component that holds the state of the app in this.state. I'm using Backbone's router, so when I get an event from the router (a URL was loaded or changed in some way), I call setState to update the top-level component's state. When I update the state myself, I make sure to also call the router's navigate method to update the URL. Seems to work pretty well: you can see an example from my little app at https://github.com/mjm/eats.

Answer 2

Another option with React is to use the React router component. It handles pushState for you and you can dynamically change the available routes as needed. It works with the same methodology as React does, as it is a react class itself. Check it out at:

https://www.npmjs.org/package/react-router-component

Answer 3

In the React distribution there's an exemple folder with one being TodoMVC + Director.

Flatiron Director is a router, so you'll have an exemple on how to use it in React.

Notice that Instagram is currently using Backbone router but they are planning to use Director (mostly because they can use the same router on client and server side and they don't need Backbone except the router)

Answer 4

In general when it comes to client side route handing, As long as your URL always leads to one application state and one state only the back and forward-buttons will work fine, it shouldn't matter in your application how you reach a certain URL/State.

So if states in your app (not the React setState-state, just whatever state your app can be in) is always is reflected with a unique URL then you're all set.

Answer 5

Remember EmberJS has done a great work on routing. This react-nested-router has borrowed the technique from that and might help you out.https://github.com/rpflorence/react-nested-router

Answer 6

I wrote a React mixin for using history.js to push the internal state of a React component to the browser's history.

The basic idea is to:

1. Register the React component to receive data from the browser history on page load. This is done with bindToBrowserHistory.
2. Call saveState at any point in the React component where you would like to save the state the browser's history.

var SimpleCategoryView = React.createClass({
  mixins: [HistoryJSMixin],
  getInitialState: function() {
    return { current_category: 0 }
  },
  handleCategoryChange: function(e) {
    this.setState({current_category: e.target.value});
    this.saveState();
  },
  componentDidMount: function() {
    this.bindToBrowserHistory();
  },
});

In this example I am using handleCategoryChange to handle when the user clicks a button to change the category, when this happens I want to remember the current state of the React component.

I wrote in some more detail about this mixin here.

Answer 7

React Router has worked really well for me. Super simple to use, with tons of bells and whistles if you need them.