gatsby-plugin-create-client-paths remounts the root on every page transition

[jaredpalmer]

Description

gatsby-plugin-create-client-paths is remounting the root component on every single page transition for the client-only path. This means that if you have auth check in your top-level root, your authentication check will run on each new page instead of just once like it would with a normal React SPA (e.g. one built with create-react-app)

Expected result

The root component should only mount once.

Actual result

The root (with routes) is remounted on every single transition.

[jaredpalmer]

Cc @kkemple

[pieh]

Context:
This is happening because of key used in component just above user pages/templates -

gatsby/packages/gatsby/cache-dir/page-renderer.js

Line 23 in b93cddc

key: this.props.location.pathname,

There is a way to override this in user code - adding something like this in gatsby-browser.js in root directory of project:

import React from "react"

export const replaceComponentRenderer = ({ props }) => (
  <props.pageResources.component {...props} />
)

Will do everything we do in core except for setting key. Alternatively you can add key={props.pageResources.page.path} there, if you would only want to not remount for same client-only path.

This key was initially added as (not ideal) solution for #8181 (problems that some plugins/libs that need to manipulate DOM directly and without remounts would cause weird problems), so we need to be careful how to deal with this. Potentially making it so just pages with client-only paths don't remount might be feasible, but would need some testing.

[jaredpalmer]

This worked. Submitted #10255 which documents the solution.