最近在开发一个基于 Next.js 的前端项目时，遇到了一个问题：在开启了 useFileSystemPublicRoutes 后，页面在刷新时会出现 404 错误页面。经过一番研究和实践，我找到了解决办法，现在分享给大家。
问题分析
首先，我们需要了解 useFileSystemPublicRoutes 的作用。该选项开启后，Next.js 会按照文件系统路径生成路由。例如，你的页面文件路径为 pages/about.js，那么访问 /about 就会加载该页面。这样做的好处是可以自动生成路由，不需要手动配置路由文件，同时也能够避免路由名称和路径不一致的问题。
但是，当开启了该选项后，在页面刷新时就会出现 404 错误页面。这是因为 Next.js 默认使用了服务端渲染，而服务端渲染需要先执行后台逻辑生成 HTML，再返回给浏览器显示。但是，当在浏览器中刷新页面时，会直接向服务器请求该页面的 HTML，而服务器并没有这个页面的 HTML，因此会返回 404 错误页面。
解决办法
1. 使用 Link 组件
我们可以使用 Link 组件来解决这个问题。Link 组件会将页面渲染到客户端，而不是服务器。这样，当在客户端刷新页面时，就能够正确地加载页面。
-- -------------------- ---- ------- ------ ---- ---- ----------- ------ ------- -------- ------- - ------ - ----- --------- --------- ------- -- --- ----- -------- ----- --------- ----- ---- -- -------- ------- ------ - -展开代码
2. 使用 next/router
如果你需要在页面刷新时执行一些后台逻辑，例如刷新数据、重置状态等，你可以使用 next/router 模块。该模块提供了 useRouter 和 withRouter 两个 API，可以方便地获取当前路由对象和路由参数。
-- -------------------- ---- ------- ------ - --------- - ---- ------------- ------ - --------- - ---- ------- ------ ------- -------- ------- - ----- ------ - ----------- ------------ -- - -- -------------- ----------------- ----------- -- --- ------ - ----- --------- --------- ------- -- --- ----- -------- ------- ----------- -- ----------------- ------------- ------ - -展开代码
需要注意的是，使用 next/router 时，如果你在 getInitialProps 方法中获取数据，该方法只会在服务器端执行。为了确保客户端和服务器端获取到的数据一致，你需要在 useEffect 中再次执行该方法。
总结
以上就是解决 Next.js 开启 useFileSystemPublicRoutes 后的页面刷新问题的两种方法。使用 Link 组件可以快速解决问题，而使用 next/router 则更灵活，可以执行一些后台逻辑。需要根据具体情况选择方法。希望本文能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6656ffb6d3423812e4c19eb0
