本文分析下React部署出现Unhandled Thrown Error异常的原因和解决思路。
1. 背景
最近捣鼓了一个React项目，本地运行没问题，部署到服务器后进入页面报错，错误信息如下：
1
2
3
4
Unhandled Thrown Error!
404 Not Found
💿 Hey developer 👋
You can provide a way better UX than this when your app throws errors by providing your own errorElement props on <Route>
2. 原因分析
这个错误提示是路径原因，我配置访问路径采用的是nginx不同域名访问服务器不同路径的资源，nginx配置大致如下：
1
2
3
4
5
6
# nginx.conf
root /usr/share/nginx/html; # 假设root目录为该配置
location /App {# 要部署的项目名为App，准备放到root路径下，届时方便部署多个项目
try_files $uri $uri/ /App/index.html;
}
React路由配置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const router = createBrowserRouter ([
{
path : '/' ,
element : < Layout />,
children : [
{
index : true ,
element : < MonthApp />
},
{
path : 'year' ,
element : < YearApp />
}
]
},
{
path : '/new' ,
element : < KeepAccount />
}
])
经过测试，是因为项目上传到nginx配置的root后，路由不像本地一样，需要根据项目名在路由带上项目的前缀。
3. 解决办法
修改React的路由配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const router = createBrowserRouter ([
{
path : '/App/' ,
element : < Layout />,
children : [
{
index : true ,
element : < MonthApp />
},
{
path : 'year' ,
element : < YearApp />
}
]
},
{
path : '/App/new' ,
element : < KeepAccount />
}
])
4. 提示
如果像我这样准备通过nginx在root路径下配置多个项目的，可能出现页面加载css和js资源404的情况（一般看浏览器的请求就是缺少项目名），可以在React项目的package.json加上"homepage": ".",。
5. 参考文章
Unhandled Thrown Error! 404 Not Found on react project