React Router : useParams에 대한 빠른 소개

무엇입니까 useParams?

useParams URL의 동적 매개 변수에 액세스 할 수있는 React Router Hook입니다.

useParamsURL 매개 변수의 키 : 값 쌍의 객체를 반환합니다. 은 key당신이 URL에 할당 한 이름입니다; 이 value전달되는 것입니다.

우리는 어떻게 사용 useParams합니까?

• 가져 오기 useParams에서 react-router-dom.
• path매개 변수로 액세스하려는 의 부분을 콜론과 선택한 식별자로 바꿉니다 . 매일 변경된 내용 specials과 specials변경된 내용 을 보여주는 경로가있는 경우 경로는 다음과 같이 표시됩니다. /specials/:currentDay, where currentDayis dynamic based on the day.
• 구문을 사용하여 매개 변수를 관리 할 구성 요소에서 동일한 변수 이름을 선언하십시오 let { currentDay } = useParams();.
• 예를 들어 하나의 URL에서 여러 매개 변수에 액세스 /specials/:currentDay/:birthdaySpecial할 수 있으며 다음과 같이 구조화 구문을 사용하여 선언 할 수 있습니다 let { currentDay, birthdaySpecial } = useParams();.
• 매개 변수는 기본적으로 필수입니다. 매개 변수가 선택 사항이되도록 ?하려면 다음 path과 같이 에서 뒤에 를 추가하면 /specials/:currentDay/:birthdaySpecial?됩니다. (컴포넌트에서이 조건을 처리해야 함을 기억하십시오!)

import { BrowserRouter, Route, Switch, useParams } from "react-router-dom";
const App = () => {
  return (
    <BrowserRouter>
      <div>
        <h1>All About Pizza</h1>
        <Switch>
          <Route path="/" exact>
            <Home />
          </Route>
          <Route path="/toppings">
            <Toppings />
          </Route>
          <Route path="/specials/:currentDay">
            <Specials />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  )
}
export default App;