useRoutes() 훅

import { useRoutes } from 'react-router-dom';

const App = () => {
  const routes = useRoutes([
    { path: '/', element: <TimerPage /> },
    { path: '/clock', element: <ClockPage /> },
    { path: '/stopwatch', element: <StopWatchPage /> },
    { path: '/alarm', element: <AlarmPage /> },
  ]);

  return (
    <>
      <Header />
      <ContentContainer>
        <NavBar />
        {routes}
      </ContentContainer>
    </>
  );
};

와 같은 식으로 사용할 수 있다.

 

path설정같은거 할때 쉽게 정리 가능해서 나름 유용한 것 같다.

 

v6.0 이전에는 react-router-config 였다고 한다.

 

일반적 Routes와 쓰이는것도 똑같고 무엇을 쓸지는 취향차이라고 합니다..

 

React Router says, "Honestly, we like and use them both."

 

라고 공식문서에 돼 있다고 합니다.