Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(gatsby): Fix client side routing match paths regression #15010

Merged
merged 11 commits into from
Jun 24, 2019
Merged

fix(gatsby): Fix client side routing match paths regression #15010

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
41a3193
export loader.findMatchPath
Moocar Jun 21, 2019
8a71503
reorganize production-app explicit navigate if statement
Moocar Jun 21, 2019
b34350a
strip BASE_PATH prefix before finding matchPath
Moocar Jun 21, 2019
f0df576
Add end to end tests
sidharthachatterjee Jun 21, 2019
7003674
Remove screenshots
sidharthachatterjee Jun 21, 2019
fdc8536
Update tests
sidharthachatterjee Jun 21, 2019
5f58d7b
Add .gitignore
sidharthachatterjee Jun 21, 2019
cf17fb0
Move tests to development runtime
sidharthachatterjee Jun 24, 2019
291d88a
Hard code path in tests
sidharthachatterjee Jun 24, 2019
228b133
Remove serve e2e tests
sidharthachatterjee Jun 24, 2019
0f72bd1
Add tests in production runtime
sidharthachatterjee Jun 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/gatsby/cache-dir/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ if (process.env.NODE_ENV !== `production`) {
// Cache for `cleanAndFindPath()`. In case `match-paths.json` is large
const cleanAndFindPathCache = {}

const findMatchPath = (matchPaths, trimmedPathname) => {
const findMatchPath = trimmedPathname => {
sidharthachatterjee marked this conversation as resolved.
Show resolved Hide resolved
for (const { matchPath, path } of matchPaths) {
if (match(matchPath, trimmedPathname)) {
return path
Expand Down Expand Up @@ -66,7 +66,7 @@ const cleanAndFindPath = rawPathname => {
return cleanAndFindPathCache[trimmedPathname]
}

let foundPath = findMatchPath(matchPaths, trimmedPathname)
let foundPath = findMatchPath(trimmedPathname)
wardpeet marked this conversation as resolved.
Show resolved Hide resolved
if (!foundPath) {
if (trimmedPathname === `/index.html`) {
foundPath = `/`
Expand Down Expand Up @@ -371,6 +371,8 @@ const queue = {

doesPageHtmlExistSync: rawPath =>
pageHtmlExistsResults[cleanAndFindPath(rawPath)],

findMatchPath,
}

export const postInitialRenderWork = () => {
Expand Down
23 changes: 15 additions & 8 deletions packages/gatsby/cache-dir/production-app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import asyncRequires from "./async-requires"
import matchPaths from "./match-paths.json"
import loader, { setApiRunnerForLoader } from "./loader"
import EnsureResources from "./ensure-resources"
import stripPrefix from "./strip-prefix"

window.asyncRequires = asyncRequires
window.___emitter = emitter
Expand Down Expand Up @@ -62,17 +63,23 @@ apiRunnerAsync(`onClientEntry`).then(() => {
}

const { pagePath, location: browserLoc } = window

// Explicitly call navigate if the canonical path (window.pagePath)
// is different to the browser path (window.location.pathname). But
// only if NONE of the following conditions hold:
//
// - The url matches a client side route (page.matchPath)
// - it's a 404 page
// - it's the offline plugin shell (/offline-plugin-app-shell-fallback/)
if (
// Make sure the window.page object is defined
pagePath &&
// The canonical path doesn't match the actual path (i.e. the address bar)
__BASE_PATH__ + pagePath !== browserLoc.pathname &&
// Ignore 404 pages, since we want to keep the same URL
pagePath !== `/404.html` &&
!pagePath.match(/^\/404\/?$/) &&
// Also ignore the offline shell (since when using the offline plugin, all
// pages have this canonical path)
!pagePath.match(/^\/offline-plugin-app-shell-fallback\/?$/)
!(
loader.findMatchPath(stripPrefix(browserLoc.pathname, __BASE_PATH__)) ||
pagePath === `/404.html` ||
pagePath.match(/^\/404\/?$/) ||
pagePath.match(/^\/offline-plugin-app-shell-fallback\/?$/)
)
) {
navigate(__BASE_PATH__ + pagePath + browserLoc.search + browserLoc.hash, {
replace: true,
Expand Down