Как удалить параметр запроса с помощью хуков реакции? - PullRequest
Новая
       28

Как удалить параметр запроса с помощью хуков реакции?

2 голосов
/ 27 мая 2020

Я знаю, что мы можем заменить параметры запроса в классах на основе компонентов, выполнив что-то вроде: 

  componentDidMount() {       
    const { location, replace } = this.props;   

    const queryParams = new URLSearchParams(location.search);   
    if (queryParams.has('error')) { 
      this.setError(    
        'There was a problem.'  
      );    
      queryParams.delete('error');  
      replace({ 
        search: queryParams.toString(), 
      });   
    }   
  }

Есть ли способ сделать это с помощью перехватчиков реакции в функциональном компоненте?

1 Ответ

3 голосов
/ 27 мая 2020

Да, вы можете использовать useHistory & useLocation хуки из response-router: 


import React, { useState, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'

export default function Foo() {
  const [error, setError] = useState('')

  const location = useLocation()
  const history = useHistory()

  useEffect(() => {
    const queryParams = new URLSearchParams(location.search)

    if (queryParams.has('error')) {
      setError('There was a problem.')
      queryParams.delete('error')
      history.replace({
        search: queryParams.toString(),
      })
    }
  }, [])

  return (
    <>Component</>
  )
}

As useHistory() возвращает history объект, который имеет функцию replace, которая может использоваться для замены текущей записи в стеке истории.

И useLocation() возвращает location объект, который имеет свойство search содержащую строку запроса URL, например ?error=occurred&foo=bar", которую можно преобразовать в объект с помощью URLSearchParams API (который не поддерживается в IE).

...