Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Stackflow의 UI플러그인이 Stack + React Router 구조에서 비정상적으로 동작합니다.

Aperta
  • Qualcosa non va?
#608 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
30/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia riproducendo l’animazione difettosa con le configurazioni di AppRouter, AuthStack e MainStack mostrate nell’issue. Esamina il comportamento di basicUIPlugin e historySyncPlugin quando la navigazione attraversa i confini di /auth/* e /app/*; questo dovrebbe stabilire se questa composizione è supportata e documentare la struttura multi-stack consigliata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

페이지들을 성격에 따라 분류해 몇개의 Stack 을 만들었습니다. 같은 Stack 내의 페이지들끼리는 stackflow 가 라우팅 처리를 하고, 다른 Stack 의 페이지로 이동할 시에는 리액트 라우터가 라우팅을 합니다.

같은 Stack 내의 페이지들은 url 베이스를 통일시켰고, 와일드카드를 추가해 라우터는 베이스url 만 구분하게 하였습니다.
그래서 베이스url 이 달라질 때에만 (서로 다른 Stack 으로 페이지 이동을 할 때에만) 리액트 라우터가 동작하게 하는게 의도였습니다.

그런데 기존의 stackflow 로만 페이지들을 관리할 때는 페이지 전환 애니메이션(UI플러그인) 이 깨지지 않았는데 같이 사용을 하니까 애니메이션이 정상적으로 동작을 하지 않는 문제가 발생하였습니다.

제 설계가 충돌을 일으킬만한, 혹은 stackflow 의 철학과 맞지 않는 설계인지 궁금합니다!
Stackflow의 플러그인/애니메이션/히스토리 체계에서, React Router + 여러 스택 조합이 애초에 Stackflow 설계 철학과 충돌하는 구조인지 궁금합니다.
만약 그렇다면, 페이지들을 관심사별로 stack 으로 묶어 여러 스택으로 페이지들을 관리하고 싶을 때 어떻게 하는지 궁금합니다.

현재 구조

React Router

앱의 상위 구획(인증 / 메인 앱)을 구분하는 데 사용
/auth/* → AuthStack
/app/* → MainStack
최상위 진입 시 /auth/login으로 리다이렉트

const AppRouter = () => {
  const router = createBrowserRouter([
    {
      path: '/',
      element: <Navigate to="/auth/login" replace />,
    },
    {
      path: '/auth/*',
      element: <AuthStack />,
    },
    {
      path: '/app/*',
      element: <MainStack />,
    },
    {
      path: '*',
      element: <div>404 Not Found</div>,
    },
  ])

  return <RouterProvider router={router} />
}
Stackflow - AuthStack

/auth/* 경로에서 작동
Stackflow가 내부 액티비티(페이지) 전환 관리
등록된 액티비티:
Login → /auth/login
TeamSelect → /auth/team-select
NickName → /auth/nickname

export const { Stack: AuthStack, useFlow: useAuthFlow } = stackflow({
  transitionDuration: 350,
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({ theme: 'cupertino' }),
    historySyncPlugin({
      routes: {
        Login: '/auth/login',
        TeamSelect: '/auth/team-select',
        NickName: '/auth/nickname',
      },
      fallbackActivity: () => 'Login',
    }),
  ],
  activities: {
    Login: LoginPage,
    TeamSelect: TeamSelectPage,
    NickName: NickNamePage,
  },
})
Stackflow - MainStack

/app/* 경로에서 작동
Stackflow가 내부 액티비티(페이지) 전환 관리
등록된 액티비티:
Home → /app/home
LiveRecord → /app/live-record

export const { Stack: MainStack, useFlow: useMainFlow } = stackflow({
  transitionDuration: 350,
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: 'cupertino', // cupertino | android 두가지 옵션 있음
    }),
    historySyncPlugin({
      routes: {
        Home: '/app/home',
        LiveRecord: '/app/live-record',
      },
      fallbackActivity: () => 'Home',
    }),
  ],
  activities: {
    Home: HomePage,
    LiveRecord: LiveRecordPage,
  },
})

base url 과 와일드카드를 사용해 리액트 라우터가 baseurl 이 달라질 때에만 동작하도록 의도했는데 Stack 내에서 페이지 이동을 할 때 애니메이션이 깨집니다.

https://github.com/user-attachments/assets/56b391b4-c675-4934-bca8-f3a1f16b3799

Lingua principale
TypeScript
Stelle
1k
Fork
114
Merge medio
59m
PR unite (30g)
4

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di daangn/stackflow

Tutte le issue di daangn/stackflow

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.