How to update ReactJS component based on URL / path with React-Router

Question

How can I update a ReactJS component based on URL / path when using React-Router?

The code below works, but is this the correct way to do this? Seems like a lot of code to make a simple update. I was hoping there would be a stateful API call in the router to automatically take care of this scenario.

var MyHomeView = React.createClass({
   componentDidMount: function() {
        this.props.updateHeader(); 
   },

   render: function() {
      return (
         <div>
            <h2>Home</h2>
         </div>
      );
  } 
}); 


var MyAboutView = React.createClass({
   componentDidMount: function() {
        this.props.updateHeader(); 
   },

  render: function() {
    return (
      <div className="my-page-text">
        <h2>About</h2>
      </div>
    );
  }
});


var MyHeader = React.createClass({
  mixins: [ CurrentPath ],

  getInitialState: function() {
    return {
       myPath: "about",
       classes: "ion-ios7-information"
    };
  },   

   updateHeader: function() {    
      // Classnames refer to www.ionicons.com
     if (this.getCurrentPath() === "/") {
        this.setState( {myPath: "about" } );
        this.setState( {classes: "ion-ios7-information" } );
     } else {
        this.setState( {myPath: "/" } );
        this.setState( {classes: "ion-ios7-rewind" } );
     }      
   }, 

  render: function() {
    return (
       <Link to={this.state.myPath}>
          <i className={this.state.classes} />
       </Link>
    );
  }
});


var App = React.createClass({
   updateHeader: function() {
      this.refs.header.updateHeader();
   },

   render: function() {
      return (
         <div>
            <MyHeader ref="header" />

         <this.props.activeRouteHandler updateHeader={this.updateHeader} />
         </div>
      );
  } 
}); 


React.renderComponent((
  <Routes> 
    <Route path="/" handler={App}>
      <DefaultRoute handler={MyHomeView} />
      <Route name="about" handler={MyAboutView} />
    </Route>
  </Routes>
), document.body);

Why do you keep 'myPath' and 'classes' in state ? Since you have the "getCurrentPath()", could you simply compute the link and className values inside the render function ? Or is "getCurrentPath" not refreshed properly in your case ? — phtrivier
– phtrivier, Commented Oct 27, 2014 at 13:59
I'll have to test this out, if getCurrentPath() is statefull then it should work without me keeping extra state in myPath. I should of tried this as per example in the comments of this file: github.com/rackt/react-router/blob/master/modules/mixins/… — Giant Elk
– Giant Elk, Commented Oct 27, 2014 at 21:07

Dherik · Accepted Answer · 2016-03-21 12:02:22Z

9

In react-router 2.0.0 you can use the hashHistory or browserHistory:

browserHistory.listen(function(ev) {
  console.log('listen', ev.pathname);
});

<Router history={browserHistory}>{routes}</Router>

edited Mar 21, 2016 at 12:02

answered Feb 24, 2016 at 23:30

Dherik

19.4k15 gold badges132 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

refaelio Over a year ago

I've been looking for this answer all the morning. Now, where would be the best place to put it? main app component?

Dherik Over a year ago

I'm glad that this code help you! But I don't understand your question.

Luan Nico Over a year ago

@yarden.refaeli if you use Flux, I think you should add a single listener to your main app, that updates the state of a Store. Then each component can decide to listen to that store and define their own handlers for the changes.

Stijn de Witt · Accepted Answer · 2015-12-04 17:44:04Z

6

This has been updated if you are working with the react-router > v11.0.

You can read the details here

TLDR:

 // v0.11.x
 var Something = React.createClass({
   mixins: [ Router.State ],
   render: function () {
      var path = this.getPath();
   }
 });

For the full State API: https://github.com/rackt/react-router/blob/master/doc/04%20Mixins/State.md

edited Dec 4, 2015 at 17:44

Stijn de Witt

42.5k13 gold badges82 silver badges81 bronze badges

answered Feb 5, 2015 at 21:16

cooncesean

1,3042 gold badges19 silver badges27 bronze badges

2 Comments

Neta Over a year ago

This has been changed in react-router v1.0. See: github.com/rackt/react-router/blob/master/…

Stijn de Witt Over a year ago

Link the details here is dead... You should never link to master as it changes all the time. Instead pick the tag that corresponds with the current release and use that link.

Sean Adkinson · Accepted Answer · 2014-11-27 07:43:19Z

3

This question has been open awhile, and it seems like there should be a more straightforward solution, but I'll take a stab and share what we do in our application.

We are using the Flux architecture, which has the notion of Stores that inform components when their state is updated. In react-router, they have a PathStore that fits into this model nicely, since when the URL changes it can then notify components that care and need to be updated.

The StoreListener we use in our application is publicly available here: https://github.com/odysseyscience/react-flux-suppprt. I should've published to NPM, but haven't yet. I'll do that soon if you think it would be helpful.

Here is how we use our StoreListener to listen for changes on the PathStore from react-router, and how you would use it in your MyHeader:

var StoreListener = require('path/to/StoreListener');
var PathStore = require ('react-router/modules/stores/PathStore');

var MyHeader = React.createClass({
  mixins: [
    StoreListener(PathStore)
  ],

  getStateFromStores: function() {
    return {
        path: PathStore.getCurrentPath()
    };
  },

  render: function() {
    var path = this.state.path;
    var myPath;
    var classes;

    if (this.state.path === "/") {
      myPath = 'about';
      classes = 'ion-ios7-information';
    } else {
      myPath = '/';
      classes = 'ion-ios7-rewind';
    } 

    return (
      <Link to={myPath}>
        <i className={classes} />
      </Link>
    );
  }
});

This starts with a mixin that says "I care about changes to the PathStore". Whenever this store (or any store being listened to) changes, getStateFromStores() is called on your component in order to retrieve the data out of the store that you want available on this.state. If/When that data changes, render() is called again, and you re-read this.state, and apply your changes.

This is exactly our pattern for applying certain "active" CSS classes on header tabs, or anywhere else in the application that depends on the current URL.

Note that we use webpack to bundle our CommonJS modules, so there may be some assumptions about the environment that may/may not work for you.

I didn't answer this question a month ago when I first saw it because I assumed there was a better way, but perhaps our solution can help others with the same issue.

answered Nov 27, 2014 at 7:43

Sean Adkinson

8,6453 gold badges51 silver badges67 bronze badges

3 Comments

Giant Elk Over a year ago

Nice answer, I'll have to try this out, as I've never used Flux. I was also toying with holding the path's state in <App> but don't see any way to setState() in the <App> component without passing props to children like I already am.

Giant Elk Over a year ago

Can you summarize what you add to Flux in this repo, and why the base Flux isn't enough: github.com/odysseyscience/react-flux-suppprt

Sean Adkinson Over a year ago

By "base flux", do you mean this repo? If so, that is exactly the code I was augmenting with the code in my repo. Basically, StoreListener gives you a convenient method (getStateFromStores) to access the data from your stores and set it on this.state. It binds and unbinds via componentDidMount and componentWillUnmount, and calls getStateFromStores whenever anything changes. Thus you have much less boilerplate to write. The BaseStore is simply all the boilerplate you would write in each of your Stores. Just extend it for convenience.

Collectives™ on Stack Overflow

How to update ReactJS component based on URL / path with React-Router

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related