Реакция на маршрутизатор

Question

Я использую реагирующий маршрутизатор v4, возникли проблемы с перезагрузкой страницы (не window.location.reload). Я лучше приведу реальный пример использования, чтобы объяснить проблему, в качестве примера мы используем приложение для социальной сети:

1. пользователь A прокомментировал сообщение пользователя B, на странице пользователя B появилось уведомление.
2. пользователь B нажал на уведомление, мы сделали this.props.history.push('/job/' + id'), оно сработало, следовательно, пользователь B перешел на job/123 страницу.
3. пользователь A прокомментировал снова, новое уведомление появляется на странице пользователя B, в то время как пользователь B по-прежнему остается на странице job/123, он щелкнул ссылку уведомления и вызвал this.props.history.push('/job' + id'). Но он не увидит перерисовку страницы, он НЕ видел последний комментарий, потому что страница ничего не делает.

Answer 1

Вы описываете 2 различных типа изменений состояния.

В первом сценарии, когда пользователь B имеет значение , а не на странице /job/:id, и он щелкает ссылку, вы получаете изменение URL-адреса, которое вызывает изменение состояния в маршрутизаторе и передает его через к вашему компоненту, чтобы вы могли видеть комментарий.

Во втором сценарии, когда пользователь B уже уже находится на странице /job/:id и поступает новый комментарий, URL-адрес менять не нужно, поэтому нажатие на ссылку не изменится URL и не вызовет изменения состояния в маршрутизаторе, поэтому вы не увидите новый контент.

Возможно, я бы попробовал что-то подобное (псевдокод, потому что я не знаю, как вы получаете новые комментарии или подписываетесь через веб-сокет):

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>The home page</h1>

        {/* This is the link that the user sees when someone makes a new comment */}
        <Link to="/job/123">See the new comment!</Link>
      </div>
    );
  }
}

class Job extends React.Component {
  state = { comments: [] };

  fetchComments() {
    // Fetch the comments for this job from the server,
    // using the id from the URL.
    fetchTheComments(this.props.params.id, comments => {
      this.setState({ comments });
    });
  }

  componentDidMount() {
    // Fetch the comments once when we first mount.
    this.fetchComments();

    // Setup a listener (websocket) to listen for more comments. When
    // we get a notification, re-fetch the comments.
    listenForNotifications(() => {
      this.fetchComments();
    });
  }

  render() {
    return (
      <div>
        <h1>Job {this.props.params.id}</h1>
        <ul>
          {this.state.comments.map(comment => (
            <li key={comment.id}>{comment.text}</li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/job/:id" component={Job} />
    </Switch>
  </BrowserRouter>,
  document.getElementById("app")
);

Теперь страница будет обновляться в обоих сценариях.

Answer 2

Похоже, что это распространенный сценарий во многих случаях. Это может быть решено, используя много различных подходов. Проверьте этот вопрос stackoverflow . Есть несколько хороших ответов и выводов. Лично этот подход имел для меня больше смысла.

location.key меняется каждый раз, когда пользователь пытается перемещаться между страницами, даже в пределах одного route. Чтобы проверить это место под блоком кода в вашем /jod/:id компоненте:

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {
      console.log("... prevProps.key", prevProps.location.key)
      console.log("... this.props.key", this.props.location.key)
    }
  }

У меня была точно такая же ситуация. Обновлено состояние в componentDidUpdate. После этого сработало как положено. Нажатие на элементы в том же состоянии обновляет маршрут и отображает правильную информацию.

Я предполагаю (как не уверен, как вы передаете / обновляете комментарии в /job/:id), если вы установите что-то подобное в вашем /job/:id компоненте, который будет работать:

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {

      this.setState({
        comments: (((this.props || {}).location || {}).comments || {})
      })
    }
  }

Answer 3

Вы должны посмотреть обновление postId в componentWillUpdate жизненном цикле и сделать что-то вроде этого:

  componentWillUpdate(np) {
    const { match } = this.props;
    const prevPostId = match.params.postId;
    const nextPostId = np.match.params.postId;
    if(nextPostId && prevPostId !== nextPostId){
      // do something
    }
  }