gaaamiiのブログ

間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

history.listenこう使ってる

要約

  • SPA作ってると、なんかイベントが起きたときにURL変えつつなにか処理をしたい
  • そこのページのまま、クエリストリングだけ書き換えて画面更新したいみたいなのがある
  • history.listenというのを使うとできる

前提

  • React Routerつかってる

history.listenこうつかってる

interface Props extends RouteComponentProps {
  hoge: string;
}

class MyPage extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
  }

  componentDidMount() {
    this.unregisterHistoryCallback = this.props.history.listen((location: LocationDescriptor) => {
      this.updatePageByQuery(location.search.toString())
    })
  }
  
  componentWillUnmount {
    this.unregisterHistoryCallback()
  }
  
  private updatePageByQuery(query: string) {
    this.props.updateMyPageData(query)
  }

  private pushHistory(obj: any) {
    const query = QueryHelper.toQueryString(obj)
    this.props.history.push({ search: query })
  }
}

やっていること

URLつくる -> URLに紐付いた状態更新メソッド的なものを呼び出してる

参考