Question

我想将site.com/shop/plp/、site.com/shop/plp/whatever-url和site.com/shop/plp/whatever-url?id:value都转到site.com/ shop / plp，而无需更改url或查询字符串。

我目前正在使用Gatsby和@ reach / router。

是否有一种无需借助重定向即可完成此操作的方法？

Answer 1

我能够通过 Client-only routes 实现这一目标。基本上，这是盖茨比（Gatsby）内置的前端解决方案，它对所有与特定模式匹配的URL使用页面src/pages/foo.js中的特定文件。

我有一个针对特定问题deployed here-Github repo的有效版本。尝试使用/app/...导航到任何URL以从JSON placeholder获取数据-检查控制台输出。一些例子：

仅客户端路由能否正常工作取决于您的静态托管：

例如，只有当我首先导航到静态生成的页面（如索引/）然后导航到/app时，它才能在https://zeit.co/上工作/ li>
它仅适用于Github页面。在考虑使用AWS S3，Google托管等之前进行测试。

查看这些文件：

Answer 2

Advait的答案使我朝着正确的方向前进，想要添加实际的代码和所需的其他更改。

在gatsby-node.js中，在exports.createPages ...之前

exports.onCreatePage = ({ page, actions }) => {
    const { createPage } = actions;

    if (page.path === '/routing/') {
        page.matchPath = '/routing/*';
        createPage(page);
    }
};

在pages / routing / index.js

render() {
    console.log(this.props);
    return (
        <Layout>
            <Container>
                <TestComponent />
            </Container>
        </Layout>
    );
}

与此问题有关的最后一步是在呈现实际页面之前防止404页面闪烁，https://github.com/gatsbyjs/gatsby/issues/5329

在404.js中

const browser = typeof window !== "undefined" && window;
const NotFoundPage = () => {
return (
    browser && (
        <div>
            <Layout>
                <Container>
                    <h1>404 Page</h1>
                </Container>
            </Layout>
        </div>
    )
);
};

希望这对某人有帮助

有没有办法将所有具有相同基本URL段的URL路由到Gatsby中的同一页面？

2 个答案: