React 라우터에서 리디렉션 사용

1. 기능 구성 요소에서 React Router 리디렉션
2. 클래스 구성 요소에서 React 라우터 리디렉션

복잡한 웹 애플리케이션을 개발하는 개발자라면 라우팅의 중요성을 이해하고 있을 것입니다. 경로는 앱의 탐색 시스템을 구성하는 핵심 요소 중 하나입니다. ReactJs 개발자는 react-router-dom 패키지를 사용하여 애플리케이션 경로를 만드는 경향이 있습니다.
양식(또는 다른 사용자 작업)을 제출한 후 애플리케이션이 다른 URL로 이동해야 하는 경우가 있습니다. 이 기사에서는 React에서 리디렉션을 처리하는 방법을 살펴보겠습니다.

기능 구성 요소에서 React Router 리디렉션

후크는 기능적 구성 요소의 기본 기능을 확장할 수 있습니다. React 개발자는 useReducer(), useState(), useEffect()와 같은 내장 후크를 사용하거나 고유한 사용자 정의 버전을 만들 수 있습니다.

useHistory() 후크

useHistory()는 구성 요소의 현재 위치(URL)가 포함된 history 인스턴스를 반환합니다. 리디렉션을 처리하는 것은 이 후크의 주요 목적이 아닙니다. 그러나 새로운 버전의 React Router(5 이상)에서는 이 후크를 사용하여 효율적이고 읽기 쉬운 방식으로 사용자를 리디렉션할 수 있습니다.

예를 살펴보겠습니다.

import { useHistory } from "react-router-dom"
function SampleComponent() {
  let history = useHistory()
  function handleClick() {
    history.push("/somepage")
  }

  return (
    <span onClick={() => handleClick()}>
      Go home
    </span>
  )
}

이 예에서는 react-router-dom 패키지에서 useHistory 후크를 가져옵니다. 그런 다음 click 이벤트에 대한 이벤트 핸들러가 있는 단일 <span> 요소를 반환하는 간단한 기능 구성 요소를 정의합니다.

또한 useHistory() 후크에서 반환된 인스턴스를 저장하기 위해 history 변수를 만듭니다.

이벤트 핸들러 함수의 본문에서 .push() 메서드를 사용하고 문자열을 인수로 전달합니다. 이 메서드에 대한 인수는 끝에 현재 URL에 추가됩니다. 따라서 애플리케이션이 localhost:3000 포트에서 실행 중이고 click 이벤트를 처리해야 하는 경우 URL은 localhost:3000/somepage로 변경됩니다.

클래스 구성 요소에서 React 라우터 리디렉션

작업(양식 제출, 버튼 클릭 또는 기타 사용자 작업)을 수행한 후 다른 URL로 이동하는 또 다른 방법은 사용자 정의 <Redirect> 구성 요소를 사용하는 것입니다. "react-router-dom" 라이브러리에서 가져올 수 있습니다.
상태 값에 따라 조건부로 렌더링하여 리디렉션이 발생하는 시기를 제어할 수 있습니다. 이 예를 살펴보겠습니다.

import React from "react"
import { Redirect } from "react-router-dom"

class MyComponent extends React.Component {
  constructor(props){
     super(props)
     this.state = {
    	    condition: false
  		}
  }
  handleClick () {
    axios.post(/*URL*/)
      .then(() => this.setState({ condition: true }));
  }

  render () {
    const { condition } = this.state;

     if (condition) {
       return <Redirect to='/somePage'/>;
     }
     return <button onClick={() => this.handleClick()}>Redirect</button>;
}

우리 상태에는 false로 설정된 condition 속성이 있습니다. 이 부울 값으로 인해 <Redirect> 구성 요소가 렌더링되지 않고 사용자의 URL이 변경되지 않습니다.

단일 버튼을 클릭함으로써 사용자는 condition 속성을 true로 설정하는 이벤트 핸들러를 트리거할 수 있습니다. 이 경우 if 문의 기준이 충족되고 렌더링 기능은 <Redirect> 구성 요소를 반환하여 사용자를 지정된 상대 경로로 안내합니다.

이 경우 애플리케이션에 localhost:3000에 홈페이지가 있고 <Redirect> 구성 요소에 '/somePage' 값이 있는 to 속성이 있는 경우 사용자는 localhost:3000/somePage 위치로 리디렉션됩니다.

this.props.history.push("")

useHistory() 후크를 사용하는 것이 사용자의 현재 위치에 액세스하는 유일한 방법은 아닙니다. 개발자는 props 개체의 history 속성을 읽어 두 가지 유형의 구성 요소에서 동일한 결과를 얻을 수 있습니다.

버튼을 클릭한 후 리디렉션이 발생하도록 하려면 .push("") 메서드를 사용하여 사용자가 리디렉션되어야 하는 위치에 대한 상대 경로를 제공하는 onClick 이벤트 핸들러를 설정해야 합니다. 다음은 예입니다.

<button onClick={this.props.history.push('/somePage')}>Redirect to some page </button>

현재 위치가 localhost:3000 홈페이지에 있는 경우 이 버튼을 클릭하면 사용자가 localhost:3000/somePage URL로 이동합니다.