关于 react 项目结构的疑惑

[iGmainC]

现在手头的一个项目需要从零开始

现在搭的项目结构为：

src
├── api
│   ├── auth
│   └── index.ts
├── components
│   ├── A
│   ├── B
│   └── C
├── pages
│   ├── APage
│   ├── BPage
│   └── CPage
├── route.tsx
├── store
│   ├── XXX
│   └── XXX
└── utils

技术栈为：vite + tailwindcss + nextui + zustand + axios

问题 1：这套项目结构和技术栈有什么问题吗

问题 2：在使用过程中 api 出错式报错的 alert 应该采取什么方案，我现在是错误边界来处理组件本身的异常错误，window.onunhandledrejection 来捕获 api 错误，有没有什么更优雅的 api 报错方案

[shipLoad]

第一个问题 项目结构和技术栈目前来说已经够用了 基本上都是新的技术 没什么问题
第二个问题 axios 里面有内部的 error 接口 你可以去 axios 文档看看

[XCFOX]

我建议你放弃思考直接用框架的答案。
如果当前项目是基于 React-Router 的话上 remix: https://remix.run/
不然的话直接上 https://nextjs.org/

啥目录结构、错误处理框架都给你安排得明明白白：
https://remix.run/docs/en/main/guides/errors
https://nextjs.org/docs/app/building-your-application/routing/error-handling

[iGmainC]

@shipLoad 请教一下，如果 api 有报错，我是应该包成统一的 ApiError 格式往上 throw ，监听那里接到就按照错误渲染 alert ，还是应该搞一个 store ，报错之后往 store 里塞错误信息

[iGmainC]

@XCFOX 现在用的确实是 React-Router ，主要是对前端的这种技术栈不是特别了解

[vance123]

无所谓的，能跑起来就行，将来慢慢优化

[stimw]

如果是 TypeScript ，那么 router 更推荐 https://tanstack.com/router/v1

React Router 这个逆天库已经不想评价了。。

然后新项目的话可以无脑 nextjs ，也不需要关心 router 。

我不太喜欢 nextui ，shadcn 自主性更强一点。不过这个见仁见智。

[stimw]

api 错误是指 fetch 报错？
新项目的话纯 axios 也可以扔了，看一下 react-query （一天内足够）。

[looplj]

react-query 内部再使用 axios ，而不是自己 useEffect 套 axios 。
react-query 有 onError ，axios 也有 interceptors 可以统一处理报错