From ca4a1723380ad255b48c6fe0d974d67376e8116a Mon Sep 17 00:00:00 2001 From: Marcus Cemes <20288819+MarcusCemes@users.noreply.github.com> Date: Fri, 7 Jun 2019 03:16:28 +0200 Subject: [PATCH] Add scroll tip to Building Apps docs page (#14582) ## Motivation Expand the Building Apps with Gatsby page, which is very short, and save people time searching. ## Description I lost 1-2 days of my time trying to deal with dynamic routing in an integrated React app inside of Gatsby. Despite how many different combinations of @react/router, react-router, createHistory, createMemoryHistory, I could not figure out how on earth to get complex routing to work within a SPA page without gatsby scrolling to the top every time, and by trying to trick Gatsby, I couldn't get proper history working without it breaking somehow. Despite the numerous Google searches, I could NOT find a way to disable Gatsby scroll behaviour, only many issues about it *not* happening. The solution, in the end, was horrendously simple, implement `the shouldUpdateScroll` browser API. By adding this I hope I save somebody at least a few hours of their time. I thought of maybe adding it to the ` / navigate()` doc page, but it's already long, and it's quite specific to SPA routing. --- docs/docs/building-apps-with-gatsby.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/docs/building-apps-with-gatsby.md b/docs/docs/building-apps-with-gatsby.md index f5515c73a9a00..4f3e8aa3b79c3 100644 --- a/docs/docs/building-apps-with-gatsby.md +++ b/docs/docs/building-apps-with-gatsby.md @@ -52,4 +52,6 @@ exports.onCreatePage = async ({ page, actions }) => { > 💡 Note: There's also a plugin to simplify the creation of client-only routes in your site: > [gatsby-plugin-create-client-paths](/packages/gatsby-plugin-create-client-paths/). +> Tip: For applications with complex routing, you may want to override Gatsby's defualt scroll behavior with the [shouldUpdateScroll](/docs/browser-apis/#shouldUpdateScroll) Browser API. + Check out the ["simple auth" example site](https://github.com/gatsbyjs/gatsby/blob/master/examples/simple-auth/README.md) for a demo implementing user authentication and restricted client-only routes.