CODEWITHSUNDEEP
gatsby
Chuck
Chuck

Reputation: 375

Is there a way to route all urls with same base url segment to the same page in Gatsby?

I want site.com/shop/plp/, site.com/shop/plp/whatever-url, and site.com/shop/plp/whatever-url?id:value to all go to site.com/shop/plp, without altering the url or query string.

I'm currently using Gatsby and @reach/router.

Is there a way to accomplish this without resorting to a redirect?

Upvotes: 1

Views: 1653

Answers (2)

Advait Junnarkar
Advait Junnarkar

Reputation: 3705

I was able to achieve this with Client-only routes. Basically it's a front-end solution built into Gatsby that uses a specific file from pages src/pages/foo.js for all URLs that match a certain pattern.

I've got a working version of just this specific issue deployed here - Github repo. Try navigating to any URLs with /app/... to fetch data from JSON placeholder - check the console output. Some examples:

It depends on your static hosting if client-only routes work properly:

  • For example, it worked on https://zeit.co/ only if I first navigated to a statically generated page (like index /) and then navigated to /app
  • It just works on Github pages. Test before you consider using AWS S3, Google hosting etc.

Look at these files:

Upvotes: 1

Chuck
Chuck

Reputation: 375

The answer by Advait got me heading in the right direction, wanted to add the actual code and one additional change that was required.

In gatsby-node.js, before exports.createPages...

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

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

In pages/routing/index.js

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

And the final step to prevent flashing of 404 page before rendering the actual page, related to this issue, https://github.com/gatsbyjs/gatsby/issues/5329

In 404.js

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

Hope this helps someone

Upvotes: 0

Related Questions