react-router does not update if parent component skips render #880

fizker · 2015-02-26T13:50:19Z

Use case: I don't want my components to update willy-nilly, so I use something like React.addons.PureRenderMixin to avoid unnecessary re-renders.

But neither Link nor RouteHandler does anything to trigger a render when their depending state (such as the current route) changes, so nothing actually updates.

The attached code showcases this. Clicking any of the links should change their state and show the appropriate page, but nothing is updated. Either removing the mixin in App or refreshing the browser puts the views in the appropriate state.

javascript

var React = require('react/addons')
var { Link, Route, RouteHandler, ...Router } = require('react-router')

var PageLink = React.createClass({
  render: function() {
    var styles = {color: 'yellow',}
    var activeStyles = {color: 'red'}
    return <Link {...this.props} style={styles} activeStyle={activeStyles} />
  }
})

var App = React.createClass({
  mixins: [React.addons.PureRenderMixin],
  render: function() {
    return <div>
      <nav>
        <PageLink to="page1">First page</PageLink>
        <PageLink to="page2">Second page</PageLink>
      </nav>
      <RouteHandler/>
    </div>
  },
})

var Page1 = React.createClass({
  render: function() {
    return <div>First page</div>
  }
})

var Page2 = React.createClass({
  render: function() {
    return <div>Second page</div>
  }
})

var routes = <Route handler={App}>
  <Route name="page1" handler={Page1}/>
  <Route name="page2" handler={Page2}/>
</Route>

Router.run(routes, Handler => React.render(<Handler/>, document.body))

html

<!doctype html>

<style>
  a {
    background: green;
  }
  .active {
    background: black;
  }
</style>

<body>

<script src="/bundle.js"></script>

To run the example, have webpack or browserify make the javascript into a bundle.js and put it next to the html-file. The only dependencies are react 0.12.2, react-router 0.12.4 and the harmony-enabled JSX transformer.

The text was updated successfully, but these errors were encountered:

gaearon · 2015-02-26T14:38:41Z

This seems to be #470 (also #866 later).

The underlying issue is React's: facebook/react#2517. You can +1 it!

gaearon · 2015-03-04T13:35:37Z

Closing as a duplicate of #470.

gaearon closed this as completed Mar 4, 2015

lock bot locked as resolved and limited conversation to collaborators Jan 24, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-router does not update if parent component skips render #880

react-router does not update if parent component skips render #880

fizker commented Feb 26, 2015

gaearon commented Feb 26, 2015

gaearon commented Mar 4, 2015

react-router does not update if parent component skips render #880

react-router does not update if parent component skips render #880

Comments

fizker commented Feb 26, 2015

gaearon commented Feb 26, 2015

gaearon commented Mar 4, 2015