기존 라우팅 방식
//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
728x90