Как использовать кнопки браузера назад / вперед для навигации по истории изменений состояния React - PullRequest
Новая
       38

Как использовать кнопки браузера назад / вперед для навигации по истории изменений состояния React

0 голосов
/ 02 мая 2019

У меня есть компонент страницы Dashboard.js по пути типа "/ dashboard", который позволяет пользователям перемещаться между тремя таблицами, изменяя его состояние, в то время как URL остается неизменным (маршрут не меняется). Я пытаюсь добавить поддержку браузера назад / вперед для этих изменений состояния, но я застрял, пытаясь понять, как перенести изменения состояния в историю и восстановить их в компоненте, когда пользователь нажимает кнопки назад / вперед.

В моем компоненте я попытался добавить this.props.history.push(this.props.location.path, this.state) к одной из моих основных функций, которая выполняет setState(), чтобы увидеть, позволит ли это навигацию по кнопке назад. Это определенно добавляет в историю, потому что теперь я могу нажать кнопку назад несколько раз, прежде чем она покинет страницу, но страница выглядит так же (компонент не возвращает старое состояние). Как и где сделать компонент «восстановить старое состояние» при нажатии кнопки «назад»?

Вот базовый пример структуры моего компонента: 

class Dashboard extends Component {
  state = {
    // table data, current table, etc.
  }

  componentDidMount() {
    // get records from db, set state
  }

  navigateExample() {
    // various functions like this one set state,
    // basically navigating between tables
    this.props.history.push(this.props.location.path, this.state) // <--here?
    this.setState({ table: newTable })
  }

  render() {
    // renders different table components depending on state
  }
}

Я прошу прощения, если пример кода слишком расплывчатый, мой файл компонента большой, и я не знаю, что уместно включить. Заранее спасибо за помощь.

1 Ответ

0 голосов
/ 03 мая 2019

Отвечая на мой собственный вопрос здесь, но я думаю, что искал неправильное решение, и я хочу оставить этот след крошки для всех, кто думает, что это нужно в их веб-приложении.

Я понял, что на самом деле было бы лучше изменить URL, когда пользователь перемещается по таблицам. Несмотря на то, что компонент один и тот же, я могу передать несколько дополнительных параметров через путь маршрута следующим образом: 

<Route path="/dashboard/:table?/:group?/:classID?" component={Dashboard} />

Затем я обновлю состояние, установив новый URL, получив значения из match.params в componentDidUpdate(prevProps) и установив состояние с ними.

Это будет иметь ряд преимуществ:

  • Изменение URL с помощью history.push автоматически создает историю, которую вы можете просмотреть с помощью кнопок назад / вперед
  • Состояние будет синхронизировано с этой историей, так как значения поступают из URL
  • Я могу выбрать, какой уровень детализации включить в URL, включая такие важные вещи, как «какая таблица», но исключая второстепенные вещи, такие как «столбец сортировки»
  • Самое главное, люди смогут делиться ссылками на точную часть панели инструментов друг с другом. Это следует принципу «определенный URL должен всегда указывать на определенную страницу». Я понял, что, хотя все эти разные таблицы инструментальных панелей визуализируются из одного компонента, они действительно считаются различными «страницами» для пользователя, и пользователи должны иметь возможность напрямую ссылаться на них с правильным URL-адресом.

Редактировать: решение работает, как описано. Это определенно был путь, он значительно уменьшил сложность моего кода.

...