React Router URL 파라미터

React Router Parameter

React Router에서 URL의 파라미터를 설정하려면 path에 :변수를 사용한다.

 // path 경로 뒤에: 를 붙여 파라미터 변수를 선언한다.
 <Route path="/detail/:변수" element={<Detail shoes={shoes} />} />

 

파라미터 변수 선언후 useParams함수를 사용하여 파라미터 값을 변수에 저장한다.

// useParams함수를 사용하도록 라이브러리 선언한다.
import { useParams } from 'react-router-dom';

function Detail(props) {

	// path에 선언한 변수명으로 변수를 선언한다.
  let {id} = useParams();

...

파라미터값 id변수를 console.log() 함수로 출력했다.

 

 

 

반응형

 

 

 

파라미터id의  값으로 각각의 인덱스 데이터를 추출할 수 있다.

// Detail.js
import { useParams } from 'react-router-dom';

function Detail(props) {

  let {id} = useParams();

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src={'https://codingapple1.github.io/shop/shoes'+ (Number(id)+1) +'.jpg'} width='100%' alt="pic"></img>
        </div>
        <div className="col-md-6">
        	// 파라미터 값을 불러와 index값을 넣어 파라미터에 따른 각각의 데이터를 불러온다.
          <h4 className="pt-5">{props.shoes[id].title}</h4> 
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}</p>
          <button className="btn btn-danger">Order</button>
        </div>
      </div>
    </div>
  )
}

export default Detail;

0번째 데이터를 가져왔다.

 

1번째 데이터를 가져왔다.