当我点击一个新的 link 时，React-Router 没有重新渲染

Question

我有一些路线，但是当点击某些路线时，react-dom 不会重新呈现。以下是我的路线：

  <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>

这是我的 /chat 组件：

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>
    );
  }
});

和我的 /chat_room 组件：

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>
    )
  }
});

对于大量代码感到抱歉，我来自 Angular 学习 React，但我还不完全确定哪些代码片段是相关的。所以请耐心等待。

问题是，假设我有 3 个 chat_rooms 排球、网球和足球。如果我首先点击足球，它完全没问题并且工作得很好，但是如果我点击网球 link，反应-dom 键不会改变，我仍然在足球频道聊天。

现在我可以换房间了，但我必须去 /about 然后返回并单击 /chat/tennis 从足球换成网球。

我真的很想避免为此使用 Redux/Flux 因为我打算转移到 MobX，我假设我没有正确改变状态，所以它没有更新 dom 但是我已经坚持了几天了，不清楚我做错了什么。谢谢！

Answer 1

您是否从 mobx-react 中导入了 observer 函数？对于启用 MobX 的组件，它们应该这样声明：var ChatApp = observer(React.createClass({ ...

Answer 2

当你点击一个新的聊天室时，ChatRoom 组件保持挂载 link：这里唯一改变的是聊天室 ID，你的组件通过道具接收它。

要使其正常工作，您只需在 ChatRoom 组件中设置一些组件的生命周期方法（有关组件生命周期方法的更多信息 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>
        )
    }
});

当我点击一个新的 link 时，React-Router 没有重新渲染

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

reactjs

react-router