React-Router is not re-rendering when I click a new link

Question

I have some routes, but when certain ones are clicked the react-dom does not re-render. Here are how my routes look:

  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/chat" component={Chat}>
        <Route path="/chat/:chat_room" component={Chat_Room}/>
    </Route>
    <Route path="/login" component={Login}/>
  </Route>

Here is my /chat component:

export default React.createClass({
  loadChatRoomsFromServer: function() {
    $.ajax({
      url: '/chat_rooms',
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState(data);
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('/chat_rooms', status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function(){
      return {chat_rooms: []};
  },
  componentDidMount: function() {
      this.loadChatRoomsFromServer();
  },
  render: function() {
  var chat_nav_links = this.state.chat_rooms.map(function(rooms, i){
        return (
            <div key={i}>
              <li><NavLink to={"/chat/" + rooms.name}>{rooms.name}</NavLink></li>
            </div>
        );
    });
    return (
      <div>
          {chat_nav_links}
          {this.props.children}
        </div>
    );
  }
});

and my /chat_room component:

var ChatApp = React.createClass({

  getInitialState: function(){
      var chat_room = socket.subscribe(this.props.params.chat_room);
      var chat_room_channel = this.props.params.chat_room;
      chat_room.on('subscribeFail', function(err) {
        console.log('Failed to subscribe to '+chat_room_channel+' channel due to error: ' + err);
      });
      chat_room.watch(this.messageReceived);
      return {messages: []};
  },
  messageReceived: function(data){
      var messages = this.state.messages;
      var newMessages = messages.concat(data);
      this.setState({messages: newMessages});
  },

  render: function() {
    return (
      <div>
          <h2>{this.props.params.chat_room}</h2>
          <div className="container">
              <div className="messages">
                <MessagesList messages={this.state.messages}/>
              </div>
              <div className="actions">
                <ChatForm chat_room={this.props.params.chat_room}/>
              </div>
          </div>
      </div>
    )
  }
});

Sorry about the huge amount of code, I am coming from Angular to learn React and am not entirely sure what code pieces are pertinent yet. So bear with me.

The problem is, let's say I have 3 chat_rooms Volleyball, Tennis, Soccer. If I click on Soccer first it is completely fine and works perfectly, but if I click on the Tennis link the react-dom keys don't change and I am talking in the Soccer channel still.

Now I can get the room to change, but I have to go to /about and then go back and click on /chat/tennis to change from soccer to tennis.

I would really like to stay away from using Redux/Flux for this as I plan to move onto MobX, I assume I am not changing state correctly, so it is not updating the dom but I have been stuck on this for a couple days now and am unclear what I am doing wrong. Thanks!

Answer 1

The ChatRoom component remains mounted when you click on a new chat-room link: the only thing that changes here is the chat-room id, which your component receives by props.

To make it work, you only have to set-up some component's life-cycle methods in your ChatRoom component (more info on components' life-cycle methods here):

var ChatRoom = React.createClass({
    getInitialState: function() {  // sets initial state only
        return {messages: []};
    },

    componentDidMount: function() {  // sets-up subscription after 1st rendering
        this.subscribeToChatRoom(this.props.params.chat_room);
    },

    componentWillReceiveProps: function(nextProps) {  // when props change!
        if (nextProps.params.chat_room !== this.props.params.chat_room) {
            // reinits state for next rendering:
            this.setState({messages: []});
            // cleans-up previous subscription:
            this.unsubscribeToChatRoom(this.props.params.chat_room);
            // sets-up new subscription:
            this.subscribeToChatRoom(nextProps.params.chat_room);
        }
    },

    componentWillUnmount: function() {  // performs some clean-up when leaving
        this.unsubscribeToChatRoom(this.props.params.chat_room);
    },

    subscribeToChatRoom: function(chatRoomId) {
        var chat_room = socket.subscribe(chatRoomId);
        chat_room.on('subscribeFail', function(err) {
            console.log('Failed to subscribe to ' + chatRoomId
                + ' channel due to error: ' + err);
        });
        chat_room.watch(this.messageReceived);
    },

    unsubscribeToChatRoom: function(chatRoomId) {
        // socket un-subscription
    },

    messageReceived: function(data) {
        var messages = this.state.messages;
        var newMessages = messages.concat(data);
        this.setState({messages: newMessages});
    },

    render: function() {
        return (
            <div>
                <h2>{this.props.params.chat_room}</h2>
                <div className="container">
                    <div className="messages">
                        <MessagesList messages={this.state.messages} />
                    </div>
                    <div className="actions">
                        <ChatForm chat_room={this.props.params.chat_room} />
                    </div>
                </div>
            </div>
        )
    }
});

Answer 2

Did you import the observer function from mobx-react yet? For components to become MobX enabled they should be declared like this: var ChatApp = observer(React.createClass({ ...