1

我在我的 gatsby 项目中面临斜杠问题。当我尝试重新加载或触发网址Ex:website.com/page1时，它正在加载带有斜杠的网址，例如website.com/page1/然后它会返回到website.com/page1。它发生在每一页。我试过删除尾部斜杠插件，但没有得到结果

我将不胜感激任何帮助。谢谢你。

4

2 回答 2

4

这是我避免这个问题的方法：

  1. 确保所有链接都链接到页面的尾部斜杠版本，例如<Link to="/some/path/">…&lt;/Link>
  2. gatsby-node.js通过createPageAPI 调用生成页面时，始终使用path尾部斜杠指定
  3. 配置服务器以服务页面，例如about.html从请求到/about/（Netlify 称之为“漂亮的 URL”）
  4. 确保服务器配置为响应目录索引并查找index.html文件作为目录索引；禁用自动索引以获得良好的度量
  5. 确保服务器响应两个版本的路径的目录索引（带有和不带有斜杠）

在大多数情况下，您只需要担心 #1 和 #2，但如果这不能解决您的问题，您会继续往下看。

于 2021-01-21T16:47:31.987 回答
1

您可以使用 Nginx 设置将每个尾斜杠 URL 重定向到非尾斜杠 URL，即您的 website.com/page1/ 重定向到 website.com/page1 URL

对于这种重写规则的 nginx 模式，例如 rewrite ^/(.*)/$ /$1 永久；

 server {

    listen       81 default_server;
    listen       [::]:81 default_server;
    server_name  example.ubuntu.com;


    rewrite ^/(.*)/$ /$1 permanent;

    root         /home/bhupesh/Public/Work-Space/auth-ui/public;


    index index.html;


     try_files $uri $uri/index.html =404;

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }


}

另一个解决方案是安装插件

npm install --save-dev gatsby-plugin-remove-trailing-slashes

然后通过gatsby-config.js进行配置

  {
      ...
      plugins: [
        ...,
        `gatsby-plugin-remove-trailing-slashes`,
      ]
    }

该插件旨在从 Gatsby 自身生成的路径中删除尾部斜杠。

然而，这并不能阻止对带有斜杠的页面进行解析，因为浏览器的构建方式是将 URL 解释为路径。

这意味着用户将需要采取额外的步骤来确保所有路由器链接都指向不以斜线结尾的路径。

例如，将渲染与 /about 相关的视图，但将在浏览器地址栏中显示为 /about/。

这是依赖路径驱动逻辑时的一个重要因素，例如在 Link 组件 activeClassName 和 activeStyle 道具的用例中。

例如，如果当前路由是 /about，则组件 <Link to="/about/" activeStyle={{ color: 'rebeccapurple' }}> 将因为斜线不匹配。

于 2021-11-19T04:34:38.997 回答