React-Router <Link>для загрузки страницы, даже если мы уже на этой странице

Question

Я использую реагирующий маршрутизатор на моем сайте.У меня есть домашняя страница и контакт.

Когда я захожу на домашнюю страницу и снова нажимаю на домашнюю страницу.Как я могу перезагрузить страницу как Facebook

выпуск здесь: https://github.com/ReactTraining/react-router/issues/1982

Answer 1

Вы можете настроить обработчик событий на «домашней» ссылке, которая будет извлекать данные, которые вы хотите обновить.

      class Nav extends React.Component {
  constructor () {
    super()
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick () {
    // code that fetches Home Page data
  }
  render () {
    return (
      <Link to='your/path' onClick={this.handleClick}>Home</Link>
    )
  }
}

Answer 2

Это может быть распространенной проблемой, и я искал достойное решение, которое будет в моей панели инструментов в следующий раз. React-Router предоставляет некоторые механизмы, позволяющие узнать, когда пользователь пытается посетить любую страницу, даже ту, на которой он уже находится.

Чтение хеша location.key, это идеальный подход, поскольку он меняет каждый-время, когда пользователь пытается перейти между страницами.

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {
        this.setState({
            isFormSubmitted: false,
        })
    }
}

Ссылка: Объект местоположения никогда не видоизменяется, поэтому его можно использовать в хуках жизненного цикла, чтобы определить, когда происходит навигация

Answer 3

Посмотрев на проблему, я могу понять, что вы можете использовать принудительное обновление:

componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.forceUpdate();
    }
  }