리액트 훅을 사용하여 쿼리 파라미터를 삭제하려면 어떻게 해야 합니까?

리액트 훅을 사용하여 쿼리 파라미터를 삭제하려면 어떻게 해야 합니까?

컴포넌트 기반 클래스의 쿼리 파라미터를 다음과 같은 방법으로 대체할 수 있습니다.

  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(), 
      });   
    }   
  }

기능하는 컴포넌트에 리액트 훅을 사용하여 할 수 있는 방법이 있습니까?

리액트 라우터 V6 이후의 경우는, 다음의 회답을 참조해 주세요.

---

원답:

네, 리액트 라우터에서 & 훅을 사용할 수 있습니다.

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</>
  )
}

~하듯이useHistory()이력이 있는 오브젝트를 반환한다.replace이력 스택의 현재 엔트리를 대체하기 위해 사용할 수 있는 함수입니다.

그리고.useLocation()를 포함하는 위치 개체를 반환합니다.search예를 들어 URL 쿼리 문자열을 포함하는 속성입니다. ?error=occurred&foo=bar"URLearchParams API(IE에서는 지원되지 않음)를 사용하여 객체로 변환할 수 있습니다.

사용하다useSearchParams갈고리를 채우다

import {useSearchParams} from 'react-router-dom';

export const App =() => {
  const [searchParams, setSearchParams] = useSearchParams();

  const removeErrorParam = () => {
    if (searchParams.has('error')) {
      searchParams.delete('error');
      setSearchParams(searchParams);
    }
  }

  return <button onClick={removeErrorParam}>Remove error param</button>
}

언급URL : https://stackoverflow.com/questions/62032050/how-to-remove-query-param-with-react-hooks