[프론트엔드] react router v6 withRouter

이전 글

• 2022.03.19 - [프론트엔드/React] - [프론트엔드] react router v6 history 사용법

 

 

 

1.  withRouter 사용 예제

 

- withRouterSample.js

 

widthRouterSample.js 파일을 생성하여 아래와 같이 소스를 작성한다.

v5에서 사용한 withRouter 함수가 사라진관계로 v6에서 아래 함수를  사용하였다.

 

 

useparms, useLocation, useNavicate

 

 

import { useParams, useLocation, useNavigate } from 'react-router-dom';

const WithRouterSample = () => {
  const params = useParams();
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <>
      <h4>Location</h4>
      <textarea style={{ height:'150px' }} value={JSON.stringify(location, null, 2)} readOnly />

      <h4>Params</h4> 
      <textarea style={{ height:'150px' }} value={JSON.stringify(params)} readOnly />

      <button onClick={() => navigate('/')}>홈으로</button>
    </>
  );
};


export default WithRouterSample;

 

 

2.  ProFile.js 수정

 

아래와 같이 이전에 작성한  ProFile 파일에 새로 추가한 widthRouterSample  컴포넌트를 호출한다.

 

 

import React from 'react';
import { useParams } from 'react-router-dom';
import WithRouterSample from './WithRouterSample';

const data = {
    ycLee : {
        name : '연철리',
        description : '프론트앤드 개발자 새내기'
    }, 
    gildong : {
        name : '홍길동',
        description : '고전소설 홍길동전 주인공'
    }, 
};

const Profile = () => {
    // matchid 가져오기
    const { username } = useParams();
    // const { username } = match.parms;
    const profile = data[username];
    if (!profile) {
        return <div>존재하지 않는 사용자 입니다.</div>
    }
    return (
        <div>
            <h3>
                {username}({profile.name})
            </h3>
            <p>{profile.description}</p>
            <WithRouterSample/>
        </div>
    )
}

export default Profile;

 

 

3.  화면  결과

 

결과 화면

 

 

 

 

- 참고 공식문서

 

React Router | FAQs