기존 프로젝트 router v5 -> v6전환

Switch

Switch에서 Routes로 변경되었다.

• exact 옵션을 더이상 사용하지 않고 동일한 효과를 주고싶다면 path 뒤에 /* 와일드카드를 작성해주면 된다.

• Route의 component에서 element로 변경되었다.

기존

<Router>
 <Switch>
  <Route exact path="/" component={MainPage} />
  <Route path="/search" component={SearchPage} />
  <Route path="*" component={NotFoundPage} />
 </Switch>
  <Route
    exact
    path={['/', '/search']}
    component={PlayerContainer}
  />
</Router>

변경

<Router>
  <ErrorBoundary>
    <Routes>
    {ROUTE.map(({ path, Component, auth }) => (
      <Route
        key={path}
        path={path}
        element={
          <Suspense fallback={null}>
            <Component />
            {path !== PATH.NOT_FOUND && <PlayerContainer />}
          </Suspense>
        }
      />
    ))}
    </Routes>
  </ErrorBoundary>
</Router>

useHistory

useHistory에서 useNavigate로 변경되었다.

기존

const history = useHistory();

const handlePath = (url: string) => history.push(url);

변경

const navigate = useNavigate();

const handlePath = (url: string) => navigate(url);

replace

useNavigate를 사용하면서 옵션을 따로 주는 방식으로 변경되었다.

기존

const history = useHistory();

history.replace(`/search`);

변경

const navigate = useNavigate();

navigate(PATH.SEARCH, { replace: true });