背景
最近捣鼓了一个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>
|
原因分析
这个错误提示是路径原因，我配置访问路径采用的是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后，路由不像本地一样，需要根据项目名在路由带上项目的前缀。
解决办法
修改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 />
}
])
|
提示
如果像我这样准备通过nginx在root路径下配置多个项目的，可能出现页面加载css和js资源404的情况（一般看浏览器的请求就是缺少项目名），可以在React项目的package.json加上"homepage": ".",。
参考文章
Unhandled Thrown Error! 404 Not Found on react project