Stackflow의 UI플러그인이 Stack + React Router 구조에서 비정상적으로 동작합니다.
还没有人认领这个 Issue。
评估
- 难度
- 5/5
- 预计耗时
- 一周以上
- 新手友好度
- 30/100
- Issue 类型
- 缺陷
- 描述清晰度
- 需要澄清
- 活跃度
- 停滞
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
首先，使用 issue 中所示的 AppRouter、AuthStack 和 MainStack 配置复现损坏的动画。检查 navigation 跨越 /auth/* 和 /app/* 边界时 basicUIPlugin 与 historySyncPlugin 的行为；完成后应能确定是否支持这种组合，并记录推荐的多 stack 结构。
由索引模型根据 Issue 内容生成。
描述
페이지들을 성격에 따라 분류해 몇개의 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
- 主要语言
- TypeScript
- 星标
- 1k
- 派生
- 114
- 平均合并
- 59 分钟
- 30 天内合并 PR
- 4
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
daangn/stackflow 的其他 Issue
-
스와이프 백 애니메이션 덜컥임 이슈可能重新可做 @Shennng 于 222 天前认领，目前没有进行中的 PR。 未关闭
难度 4/5 3-5 天 新手友好度 45/100
-
Vue3 지원 계획未关闭
难度 5/5 一周以上 新手友好度 25/100
-
难度 5/5 一周以上 新手友好度 25/100
-
难度 5/5 一周以上 新手友好度 18/100
-
难度 4/5 3-5 天 新手友好度 25/100
相似的 Issue
-
`cf complete zsh >> .zshrc` fails on vanilla zsh可能重新可做 关联的 PR 已关闭且未合并。 未关闭
难度 2/5 1-3 小时 新手友好度 75/100
cloudflare/cf#340 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
-
难度 2/5 1 小时以内 新手友好度 75/100
StoDevX/AAO-React-Native#8785 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 75/100
-
bnv-manager-v2: accept_invite creates the Mailcow domain admin before the commit可能已有人在做 @myOmikron 今天认领。 未关闭bug ready-for-agent
难度 2/5 1-3 小时 新手友好度 82/100