Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#608 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
30/100
Issue-Typ
Bug
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Beginne damit, die fehlerhafte Animation mit den im Issue gezeigten Konfigurationen für AppRouter, AuthStack und MainStack zu reproduzieren. Untersuche, wie sich basicUIPlugin und historySyncPlugin verhalten, wenn die Navigation die Grenzen von /auth/* und /app/* überschreitet; damit sollte geklärt werden, ob diese Komposition unterstützt wird, und die empfohlene Struktur mit mehreren Stacks dokumentiert werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

페이지들을 성격에 따라 분류해 몇개의 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

Vorherrschende Sprache
TypeScript
Sterne
1k
Forks
114
Ø Merge
59 Min.
Gemergte PRs (30 T.)
4

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus daangn/stackflow

Alle Issues in daangn/stackflow

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.