使用 gatsby 以编程方式导航到动态 url

Posted 2023-04-14

【中文标题】使用 gatsby 以编程方式导航到动态 url

【英文标题】：Programmatically navigate to a dynamic url with gatsby

【发布时间】：2021-05-23 19:57:50

【问题描述】：

我正在使用导航移动到另一个 URL。我看到很多帖子使用Link 移动到具有动态网址的另一个页面。但我想更改网址而不写jsx

当我导航到以下网址时，我收到 404 错误

navigate(`/vidx/$u`, 
      state:  vid: r 
    )

我将 gatsby-node.js 更改为跟随，但仍然出现相同的错误。我在pages 文件夹中有一个名为vidx.js 的文件

exports.onCreatePage = async ( page, actions ) =>    
    const  createPage  = actions
    if (page.path.match(/^\/vidx/)) 
      page.matchPath = "/vidx/*";
      createPage(page); 
     

我的网址将如下所示 - www.xyz.com/vidx/123456789。 123456789 的号码将取决于登录的用户

【问题讨论】：

vidx/123456789 路径是否存在？

没有。每当有新用户注册时，此数字就会动态生成

对不起，我不明白。您正在尝试重定向到未创建的页面？

我想重定向到vidx.js;但 URL 应为 /vidx/123456789

【参考方案1】：

我想重定向到 vidx.js；但 URL 应该是 /vidx/123456789

这永远不会起作用，因为 /vidx/123456789 总是会抛出 404 错误，因为它没有生成并且不存在，它是一个单独的新页面。

您可以使用一个简单的方法：/vidx?queryParameter=123456789。在这种情况下，您的页面将保持为 /vidx，并且您可以获取 queryParameter 以按照自己的逻辑制作内容。

【讨论】：

谢谢。我将网址更改为http://localhost:8000/vidx/?v=1613907113203。我在 pages 文件夹中有一个 vidx.js。但我仍然收到Create a React.js component in your site directory at src/pages/vidx.jsand this page will automatically refresh to show the new page component you created.

可以分享一下vidx.js页面的代码吗？

这里-codepen.io/shrwtz/pen/jOVLgpK?editors=0010

嘿，现在工作。我做了gatsby clean。非常感谢！