Gatsby 多参数动态路由答案

【问题标题】：Gatsby dynamic route with multiple parametersGatsby 多参数动态路由
【发布时间】：2020-06-30 21:16:05
【问题描述】：

我正在尝试让 gatsby 使用具有多个 url 参数的动态路由。我希望能够导航到：

.../items/124/MyItemsTitle

在我的 gatsby-node.js 中，我有以下代码：

exports.onCreatePage = async ({ page, actions }) => {
    const { createPage } = actions;
    // page.matchPath is a special key that's used for matching pages
    // only on the client.
    if (page.path.match(/^\/user/)) {
        page.matchPath = "/user/*";
        // Update the page.
        createPage(page);
    }

    if (page.path.match(/^\/items\/([0-9]+)\/\w+$/)) {
        page.matchPath = "/items/:itemId/:itemTitle";
        // Update the page.
        createPage(page);
    }
};

路由器的组件如下：

items.js

   <Router>
            <ItemDetail path="/items/:itemId/:itemTitle" />
        </Router>

但它只是渲染到 404

我已经尝试了所有可用的正则表达式多次阅读文档，但总是在 url 中只有一个变量。然后它工作。一旦我使用多个参数，它就会中断。

谢谢！

【问题讨论】：

标签： gatsby

【解决方案1】：

发现问题：

将这个添加到 gatsby-node.js 就足够了

if (page.path.match(/^\/items/)) {
    page.matchPath = "/items/*";
    // Update the page.
    createPage(page);
}

路径的其余部分由路由器处理。所以你想要的参数越多，只需将它们添加到路由器中组件的路径即可。

 <Router>
        <Items path="/items/:itemId" />
        <ItemDetail path="/items/:itemId/:itemTitle" />
 </Router>

这对我有用。

【讨论】：