我发现我在NextJS上的网站有问题.在开发过程中,我使用按钮和手动更改浏览器地址栏来导航站点.碰巧我不小心在末尾添加了一个斜杠,但我的本地主机服务器删除了它,一切都很正常.

但当我将我的静态应用程序上传到主机时,一切都改变了.在重新加载页面时,它会自动开始添加这些斜杠.正因为如此,我在网站上的照片被打破了.

如果你能帮助我,我将不胜感激!

据我所知,您需要正确配置.htaccess文件 下面是它现在的样子:

RewriteEngine On
RewriteRule ^([^/]+)/$ $1.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.html
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

推荐答案

RewriteRule ^([^/]+)/$ $1.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.html
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

您现有的规则都期望(或强制)在您的所有URL上使用尾随斜杠.因此,如果规范的URL(以及您要链接的URL)不包括尾随斜杠,则所有这些规则基本上都需要颠倒.然而,这里还有其他问题(例如,第一个规则是unconditionally重写附加.html扩展的请求,这在下一个规则with A条件中重复).

请try 以下操作:

RewriteEngine On

# (OPTIONAL) Remove trailing slash if it happens to be on the request
# Exclude physical directories (which must end in a slash)
RewriteRule %{REQUEST_FILENAME} !-d
RewriteRule (.+)/$ /$1 [R=301,L]

# Rewrite request to corresponding ".html" file if it exists
RewriteCond %{DOCUMENT_ROOT}/$1.html -f
RewriteRule ^([^.]+)$ $1.html [L]

您的原始指令只处理具有一个或两个路径深度的URL(例如,/foo//foo/bar/).上面的第二个规则处理任何路径深度(如果需要).例如./foo/foo/bar/foo/bar/baz等(无尾部斜杠).

作为优化,我有assumed个需要重写的URL不包含点(否则用来分隔文件扩展名).

请注意,RewriteRulepattern(第一个参数)只与URL路径(而不是查询字符串)匹配.如果初始请求上有任何查询字符串,则默认情况下只传递该字符串.(对于重写和客户端JS,查询字符串在初始请求中可用,应该像以前一样进行解析.)

正因为如此,我在网站上的照片被打破了.

如果您使用的是图像的相对URL,则会发生这种情况.您真的应该使用根相对URL(以斜杠开头)或绝对URL来解决此问题.另见:

Reactjs相关问答推荐

父组件更新后不重新呈现子组件

Redux工具包-useSelector如何通过Reducer引用InitialState?

在Reaction中导入';图片&文件夹时出错

Gitlab CI和VITE环境变量出现问题

在任何渲染之前在ReactJs中获取数据

MUI 日期 Select 器 - 最小日期混乱

如何使用react-router-dom保护嵌套在受保护路由中的嵌套路由?

FabricJS反序列化问题

在 golang 服务器中刷新或直接 url 路径时响应 404

如何优化 React 应用程序的性能?

React useEffect 依赖项

当我在 React Router Dom 中使用两个参数并直接在页面上导航时,数据获取没有发生

如何在 Next Js 13 App Router 中添加 Favicon 图标?

React 测试库 - 如何断言异步函数之间的中间状态?

如何处理页面加载时发生的 reactjs 错误?

如何保留我的下一个授权用户会话?所以我可以使用提供的 ID 在其他路由中获取数据

react 测试显示错误的结果

如何定制 React 热 toastr ?

如何防止 mui x-date-picker 被截断?

react 路由:router.ts:11 没有匹配的路由位置/管理