들어가기

Dashboard List에서 Dashboard title을 클릭하면 dashbaord ID를 가지고 Dashboard Detail 페이지로 넘어가게 된다.
기존에는 Link에서 경로에 /:dashboardId 형태로 전달했는데, 어느 순간 갑자기 경로를 인식하지 못해서 다른 방식으로 값을 전달하고자 했다.
또, 경로를 통해서 전달하게 되면 변수가 그대로 노출된다는 단점이 있어서 이 점 역시 변경하게 된 이유 중 하나이다.

코드

기존

아래의 방식으로 라우팅을 설정해두고,

const dashboardRoutes = [
    ...
    {
        path: '/dashboard/detail/:dashboardId',
        element: <DashboardDetail />,
    },
]

Link를 사용해서 해당 경로를 요청하고,

{
	...
    renderCell: (cellValues) => (
        <Link to=`/dashboard/detail/${cellValues.row.id}`>
            {cellValues.row.dashboardTitle}
        </Link>
    ),
},

useParams()를 사용해서 값을 받았다

import { useParams } from 'react-router-dom'
...
const params = useParams()
console.log(params.dashboardId)

수정

react-router-dom v6에서는 Link로 props 전달이 불가하다고 되어 있었는데 이 방식이 왜 되는지에 대해서는 정확히 알 수가 없다.

테스트 해본 결과 state={ key: value } 형태로 넘겨주면 null을 받게 된다. 하지만 state={ value } 형태로 넘겨주면 값을 잘 받는다.

const dashboardRoutes = [
	...
    {
        path: '/dashboard/detail',
        element: <DashboardDetail />,
        auth: authRoles.admin,
    },
]

{
	...
    renderCell: (cellValues) => (
        <Link to="/dashboard/detail" state={cellValues.row.id}>
            {cellValues.row.dashboardTitle}
        </Link>
    ),
},

import { useLocation } from 'react-router-dom'
...
const location = useLocation()
console.log(location.state)

====================================================
참조
https://snupi.tistory.com/174

https://velog.io/@y_jem/react-Link-tag-페이지-이동-시-props-전달하기

https://wodyios.tistory.com/6