[ReactRouter] 6.22 변경사항 적용해보기

기존 라우팅 방식

//router.tsx
<Routes>
   <Route path="*" element={<NotFound />} />
   <Route path="/" element={<Index />} />
 <Routes>
 
 
 //app.tsx
 <BrowserRouter>
 	<Routers />
 </BrowserRouter>

 

달라진 라우팅 방식

브라우저라우터를 사용하지 않고 routeProvider를 사용한다.

//router.tsx
const router = createBrowserRouter([
  {
    id: 'rootLayout',
    element: <Layout />,
    children: [
      {
        id: 'index',
        path: '/',
        element: <Index />,
      },
      {
        id: 'edit',
        path: '/edit',
        element: <Edit />,
      },
    ],
  },
])

//app.tsx
const App = (): React.ReactElement => {
  return (
    <Wrap>
      <RouterProvider router={router} />
    </Wrap>
  )
}

 

 

NavLink 활용

<NavLink to={url} className={({ isActive }) => `${styles.container} ${isActive && styles.active}`}>
   <IconComponent />
   <p className={styles.buttonText}>{menu}</p>
 </NavLink>

 

isActive 상태일때 (해당 페이지에 있을때)

http://localhost:3000/ -> 홈 아이콘 활성화 css 적용됨

end 적용시 /edit/123 -> 그룹편집 활성화 X

미적용시 /edit/123 -> 그룹편집 활성화 O