Реакция маршрутизатора Ссылка не вызывает повторную визуализацию при посещении по тому же пути

Вы должны посмотреть обновление 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
    }
  }

Вы описываете 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")
);

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

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

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

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {
      console.info("... prevProps.key", prevProps.location.key)
      console.info("... 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 || {})
      })
    }
  }

это решило проблему для меня:

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

<Router>  
 <Switch>

     <Redirect from = "/x_walls/:user_Id" to='/walls/:user_Id'/>
     <Route path = "/walls/:user_Id" exact render = {(props) => <Wall {...props}/> }/>           

  </Switch>

</Router>

и когда вы хотите назвать "стены", вы просто вызываете "x_walls" вместо этого