Router v6에서 Protected Route

개인적으로 진행하고 있는 토이 프로젝트에서 react-router 버전을 v6으로 업데이트했습니다. 많은 부분이 바뀌면서 코드도 많이 바꾸게 되었어요.

const AppRouter = observer(() => {
    const { isLoggedIn } = userStore;
    return (
        <Switch>
            {isLoggedIn ? <Route exact path={'/'} component={Home} /> : <Route exact path={'/'} component={Login} />}
            <ProtectedRoute exact path={'/my'} component={MySchedule} />
            <ProtectedRoute exact path={'/other'} component={OtherSchedule} />
        </Switch>
    );
});

const ProtectedRoute = observer((props: RouteProps) => {
    const { isLoggedIn } = userStore;

    return <Route {...props}>{!isLoggedIn ? <Redirect to={'/login'} /> : null}</Route>;
});

기존 v5 라우터 코드입니다. 로그인이 되어있지 않으면 Login 페이지로 이동합니다.

const AppRouter = observer(() => {
    const { isLoggedIn } = userStore;

    return (
        <Routes>
            <Route path={'/'} element={isLoggedIn ? <Home /> : <Login />} />
            <Route
                path={'/my'}
                element={
                    <ProtectedRoute>
                        <MySchedule />
                    </ProtectedRoute>
                }
            />
            <Route
                path={'/other'}
                element={
                    <ProtectedRoute>
                        <OtherSchedule />
                    </ProtectedRoute>
                }
            />
        </Routes>
    );
});

const ProtectedRoute = observer((props: ProtectedRouteProps) => {
    const { children } = props;
    const { isLoggedIn } = userStore;

    return isLoggedIn ? children : <Navigate to={'/'} />;
});

같은 동작을 하는 코드가 v6에서는 이렇게 바뀌었습니다.