Solid.js 2.0 + SolidStart — useNavigate가 router 마이그레이션 후 무한 redirect

Question

SolidStart 1.0 → 2.0 마이그레이션 후 dashboard 페이지가 무한 redirect 됩니다.

// dashboard/page.tsx
import { useNavigate } from '@solidjs/router'
export default function Dashboard() {
  const navigate = useNavigate()
  createEffect(() => {
    if (!user()) navigate('/login')  // ← 무한 루프
  })
  return <div>...</div>
}

1.0에서 잘 동작하던 코드. 2.0의 router API 변경점이 뭔가요?

...

} 1.0에서 잘 동작하던 코드. 2.0의 router API 변경점이 뭔가요?

김영삼 · Accepted Answer

2.0에서 createEffect의 reactivity 추적이 좀 더 strict해졌습니다. user() 변경마다 effect 재실행 → navigate → user() 다시 확인 → 무한 루프. 해결 — untrack 또는 createSignal 분리 // 1) 라우팅을 조건부 createEffect 안에서 createEffect(() => { const u = user() if (!u) { untrack(() => navigate('/login')) // navigate를 reactive에서 분리 } }) // 2) 또는 createMemo로 redirect 필요성 1번 계산 const needsLogin = createMemo(() => !user()) createEffect(() => { if (needsLogin()) navigate('/login') }) 또는 — 라우터 가드 패턴 (권장) // dashboard/page.tsx import { red

프론트수진 · Answer

SolidStart 2.0의 preload 패턴이 정말 깔끔합니다. effect로 권한 처리 안 하고 데이터 의존성 그래프로 자동 처리.

solid_dev · Answer

1.0 → 2.0 마이그레이션 가이드에 명시된 변경점입니다. 가이드 한 번 훑고 코드 변경하시는 게 안전. 비슷한 함정 6~7개 있어요.

신유진 · Answer

운영 6개월 경험인데 위에 적힌 함정 모두 거쳤습니다. 처음부터 정착 패턴 알았으면 좋았을 텐데...

댓글 0