Route 1 | Route 2 | Route 2 (with Param) | Route 3 (Lazy) | Route 4 (Lazy)
This is a component that shows up when the page is passed no URL parameters.
Try adding "/route-1" or "/route-2" to this pages URL - or click on the links above.
By default, Gatsby creates static pages, however, client-side routing is also possible. The client side route urls must be defined in gatsby-config.js as patterns.
The layout component that controls the header also containers a Router in it so that the title in the header responds to the routing. This is limited to this page only in the demo but more complex patterns can be achieved though using matchPath in gatsby-node.js.
Note: If different layouts on different groups of pages are desired, another alternative may be switching between multiple root layout components as described in the layout component documentation.
Ensure your basepath is set correctly to include the full path beyond the core url, ie. folders. etc
Ensure the same path is set up in gatsby-config.js for the gatsby-plugin-create-client-paths options (pattern with asterisk at the end)
The whole page reloads even if the base page doesn't change. This may have effects on your setup.
One effect of this is that by default, Gatsby will scroll the page to the top on route change. To prevent this, pass a keepScrollPosition flag to the Link component.
When running on S3 and navigating to directly to a URL (a tag or pasting into the search bar), or, simply refreshing the page, Gatsby will first show the 404 page for an instant before redirecting to the correct page. The theme's styling will be kept from the 404 page, so you will notice that the paragraph text on this page will be erroneously centred.
This also causes the page to return a 403 error status even though it visibly does load (after a split second). As well as the above styling issue, this may create issues for search engines crawling from external websites. It shouldn't impact internal links because Gatsby prefetches links different and no 403 occurs.
This likely requires solving on a project by project basis as described here. The styling issue is described here.
If using a page transition with AniLink, because the base page might be the same, the page may be replaced a splitsecond before the transition occurs.