[React Router] useParams()

 

UseParams hook 설치

useParams를 사용하기 위해서는 라우터 설치가 필수다.

// 설치
npm install react-router-dom

 

Useparams() 사용방법

1) useParams를 import 

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

const test = () => {
  return (
    <div className="test">
      <p></p>
    </div>
  )
}

export default test;

 

2) useParams 정보를 하나의 변수에 저장한다.

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

const test = () => {
  let { params } = useParams(); // 변수에 저장

  return (
    <div className="test">
      <p></p>
    </div>
  )
}

export default test;

 

3) 파라미터 값을 사용할 수 있다.

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

const test = () => {
  let { params } = useParams();

  return (
    <div className="test">
      <p>현재 페이지의 파라미터는 { params } 입니다.</p>
    </div>
  )
}

export default test;

 

 

 

참조 : https://velog.io/@nemo/useParams