具有多个参数的 Gatsby 动态路由

Question

我试图让 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);
    }
};

路由器的组件如下:
项目.js

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

但它只是呈现给 404
我已经尝试了所有可用的正则表达式
多次通读文档，但最终 url 中只有一个变量。
那么它的工作原理。
一旦我使用多个参数，它就会中断。
谢谢!

Answer 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>

这对我有用。