[React Router] generatePath() - To generate url with dynamic

[gloriaJun]

Version

"react-router-dom": "^5.0.1", "react-router": "^5.0.1",

Test Scenario

아래와 같이 path variables이 포함된 url이 정의되어 있을 때에...

<Switch>
  <Route exact path="/user/:userId'" component={UserInfo} />
  <Route exact path="/user/:userId/edit" component={UserEdit} />
</Switch>

또는 아래와 같이 별도의 route 정보들을 상수로 정의하여 사용하는 경우에..

const USER_ROUTE = {
  INFO: '/user/:userId',
  EDIT: '/user/:userId/edit',
}

<Switch>
  <Route exact path="{USER_ROUTE.INFO}" component={UserInfo} />
  <Route exact path="{USER_ROUTE.EDIT}" component={UserEdit} />
</Switch>

:userId에 대한 값을 코드 상에서 동적으로 변경하여 사용할 필요가 있는 경우.... 아래와 같이 사용하지 않고, 정의된 상수를 이용하여 사용하고 싶은 경우에...

history.push(`/user/${userId}/edit`)

React Router에서 제공되는 API 중에 generatePath()를 사용하면 원하는 것을 얻을 수 있다.

generatePath(USER_ROUTE.EDIT, { userId })
// '/user/123'

아래는 해당 React Router의 generatePath api doc에 작성된 예제이다.

import { generatePath } from "react-router";

generatePath("/user/:id/:entity(posts|comments)", {
  id: 1,
  entity: "posts"
});
// Will return /user/1/posts

References

• https://stackoverflow.com/questions/47945095/react-router-how-to-replace-dynamically-parameters-in-a-string?answertab=votes#tab-top