[React] React-router-dom v6 params 사용 및 뒤로가기

React-router-dom v6 에서는

import React from 'react'
import Index from '../pages/Works'
import SearchPortfolio from '../pages/Works/components/SearchPortfolio'

const Works = {
  name: 'works',
  path: '/works',
  element: <Index />,
  children: [{path: ':id', element: <SearchPortfolio />}]
}

export default Works

 위와 같이 useRoutes를 사용하여 params를 지정해줄 때

 

    <Main>
        <WorksNav setNavIndex={setCurNavIndex} />
        {params.id ? (
          <Outlet />
        ) : query.type === 'weplanet' ? (
          <WeplanetWorks />
        ) : query.type === 'client' ? (
          <ClientWorks />
        ) : (
          <AllWorks />
        )}
      </Main>

Outlet을 사용하여 params가 있는 url 경로로 접근 시 해당 부분에 지정해준 컴포넌트를 띄워줄 수 있다. 

 

뒤로가기 기능을 사용할 땐 useNavigate hook을 사용하여 -1을 넣어주면 된다.

  onClick={() => {
            navigate(-1)
          }}