Nextjs 404 重新加载/刷新操作错误

IT技术 reactjs react-router next.js
2021-04-24 20:50:20

我将 Nextjs 用于前端应用程序,将 dotnet core 3.1 用于 Web API。有一些页面是静态的,而其他页面是动态的,我按照官方文档来实现这一点。在开发模式(本地机器)上一切正常。静态和动态路由都正常工作并从 dontnet 核心 Web API 获取数据。

但是,在按照以下步骤发布 Nextjs 应用程序时:

  1. 纱线构建
  2. 纱线出口
  3. 在项目根目录生成一个out文件夹
  4. 该文件夹的内容上传到服务器

之后,部署的文件被上传,当登录到应用程序时,它会重定向到主页面(直到这里工作正常),但是一旦我点击重新加载页面按钮(Chrome),我就会收到 404 错误。

在此处输入图片说明

查看开发人员工具中的控制台,我得到了这个: 在此处输入图片说明

我发现这个 Stackoverflow链接有同样的问题,但答案是使用 Express 进行服务器路由。就我而言,我使用 dotnet core Web API 来处理服务器请求。所以,不知道该怎么做。

有没有办法从客户端解决这个问题?可能是缺少配置?

我在导出时注意到的唯一一件事是一条消息:No "exportPathMap" found不知道是不是这个原因。

在此处输入图片说明

2个回答

当构建和导出后的所有页面都具有“.html”扩展名时,我在react中遇到了类似的问题。我通过next.config.js文件中的以下代码解决了它

下一个.config.js

module.exports = {
  exportTrailingSlash: true,
}

注意:请勿在开发过程中使用上述代码。在构建项目之前使用它。

您可以在此处找到文档链接:https : //nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash



更新

上面的代码适用于我当时使用的next.js v 9.3.4对于较新版本,应根据文档使用以下代码。

下一个.config.js

module.exports = {
  trailingSlash: true,
}

它已修复更新您的 nextjs 包

 npm install next@latest

根据您拥有的 Next js 的当前版本,在更新您拥有的内容之前请访问此处查看是否有任何重大更改