[AWS] 카톡분석 프로젝트-8 / React useNavigate

 

저번 포스팅에서는 React 라우터의 기본적인 사용방법을 익혀봤다.

 

[AWS] Lambda 구축하기-7 / React 라우터 사용

 

---

 

이번 포스팅에서는 요청에 대한 응답으로 클릭없이 페이지를 이동해보고자 한다.

 

---

 

우선 이를 사용하기 위해서는 react-router-dom이 설치되어있어야 한다. 이전 포스팅 참고

 

 

1. Functional Component

 

- const navigate = useNavigate()를 function 내에 포함시켜준다

- onClickImg 를 예로 들었지만 response 부분에서도 동일하다 navigate('/주소') 로 페이지를 이동한다.

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

function Func() {
  const navigate = useNavigate();

  const onClickImg = () => {
    navigate(`/comment/id/등등 내가 원하는 주소`);
  };
	
  return (
  	<img src={...} alt={...} onClick={onClickImg} />
  );
}

export default Func;

 

---

 

2. Class Component

 

사실 이번 포스팅을 쓴 이유이다.

Functional Component 에서 사용방법은 많이 나와있지만 Class Component 에서는 찾기 힘들었다..

 

그러던 와중 아래 페이지에서 답을 찾아 공유한다.

https://github.com/remix-run/react-router/issues/8146

 

- useNavigate 를 import 해준다.

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

 

- class 밖에 아래 function을 따로 정의해준다.

function withNavigation(Component) {
  return props => <Component {...props} navigate={useNavigate()} />;
}

 

- class 내 navigate를 사용하고 싶은 부분에  아래와 같이 사용해준다.

class Uploadfile extends Component{
 ...
  onFileUpload = () => {    
    const formData = new FormData();      
    formData.append("demofile", this.state.selectedFile, this.state.selectedFile.name)
    console.log(formData);
    axios.post(API_URL, formData)
    .then((response) => { //성공했을때
    
    
      //navitate를 이용해 /analysis 페이지로 넘어가기
      this.props.navigate('/analysis')
      
      
    })
  }
 ...
}

 

이렇게 class component 에서도 useNavigate 를 사용할 수 있다.

 

 

끝