Replace react-router with @reach/router

packages/gatsby-link/index.d.ts

@@ -1,12 +1,4 @@
 import * as React from "react";
-import { NavLinkProps } from "react-router-dom";
-import { LocationDescriptor } from "history";
-
-export interface GatsbyLinkProps extends NavLinkProps {
-  onClick?: (event: any) => void
-  className?: string
-  style?:any;
-}
 
 export const push: (to: LocationDescriptor) => void;
 export const replace: (to: LocationDescriptor) => void;

packages/gatsby-link/src/index.js

@@ -1,9 +1,9 @@
 /*global __PATH_PREFIX__ */
 import PropTypes from "prop-types"
 import React from "react"
-import { Link, NavLink } from "react-router-dom"
+import { Link, Location } from "@reach/router"
 import { polyfill } from "react-lifecycles-compat"
-import { createLocation, createPath } from "history"
+import { parsePath } from "gatsby"
 
 export function withPrefix(path) {
   return normalizePath(`${__PATH_PREFIX__}/${path}`)
@@ -16,10 +16,6 @@ function normalizePath(path) {
 const NavLinkPropTypes = {
   activeClassName: PropTypes.string,
   activeStyle: PropTypes.object,
-  exact: PropTypes.bool,
-  strict: PropTypes.bool,
-  isActive: PropTypes.func,
-  location: PropTypes.object,
 }
 
 // Set up IntersectionObserver
@@ -50,36 +46,26 @@ class GatsbyLink extends React.Component {
       IOSupported = true
     }
 
-    const { location } = context.router.history
-    const to = createLocation(props.to, null, null, location)
+    const { location } = props
 
     this.state = {
-      path: createPath(to),
-      to,
       IOSupported,
       location,
     }
     this.handleRef = this.handleRef.bind(this)
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (prevState.to === nextProps.to) return null
-    const to = createLocation(nextProps.to, null, null, prevState.location)
-    const path = createPath(to)
-    return { path, to }
-  }
-
   componentDidUpdate(prevProps, prevState) {
     // Preserve non IO functionality if no support
     if (this.props.to !== prevProps.to && !this.state.IOSupported) {
-      ___loader.enqueue(this.state.path)
+      ___loader.enqueue(parsePath(this.props.to).pathname)
     }
   }
 
   componentDidMount() {
     // Preserve non IO functionality if no support
     if (!this.state.IOSupported) {
-      ___loader.enqueue(this.state.to.pathname)
+      ___loader.enqueue(parsePath(this.props.to).pathname)
     }
   }
 
@@ -89,26 +75,33 @@ class GatsbyLink extends React.Component {
     if (this.state.IOSupported && ref) {
       // If IO supported and element reference found, setup Observer functionality
       handleIntersection(ref, () => {
-        ___loader.enqueue(this.state.to.pathname)
+        ___loader.enqueue(parsePath(this.props.to).pathname)
       })
     }
   }
 
   render() {
-    const { onClick, onMouseEnter, ...rest } = this.props
-    let El
-    if (Object.keys(NavLinkPropTypes).some(propName => this.props[propName])) {
-      El = NavLink
+    const { onClick, onMouseEnter, location, ...rest } = this.props
+    let getProps
+    if (this.props.getProps) {
+      getProps = this.props.getProps
     } else {
-      El = Link
+      getProps = ({ isCurrent }) =>
+        isCurrent
+          ? {
+              className: this.props.activeClassName,
+              style: { ...this.props.style, ...this.props.activeStyle },
+            }
+          : null
     }
 
     return (
-      <El
+      <Link
+        getProps={getProps}
         onMouseEnter={e => {
           // eslint-disable-line
           onMouseEnter && onMouseEnter(e)
-          ___loader.hovering(this.state.path)
+          ___loader.hovering(parsePath(this.props.to).pathname)
         }}
         onClick={e => {
           // eslint-disable-line
@@ -123,44 +116,30 @@ class GatsbyLink extends React.Component {
             !e.ctrlKey &&
             !e.shiftKey
           ) {
+            e.preventDefault()
             // Is this link pointing to a hash on the same page? If so,
             // just scroll there.
-            let pathname = this.state.path
-            if (pathname.split(`#`).length > 1) {
-              pathname = pathname
-                .split(`#`)
-                .slice(0, -1)
-                .join(``)
-            }
+            const { pathname, hash } = parsePath(this.props.to)
             if (pathname === window.location.pathname) {
-              const hashFragment = this.state.path
-                .split(`#`)
-                .slice(1)
-                .join(`#`)
-              const element = hashFragment
-                ? document.getElementById(hashFragment)
-                : null
+              const element = hash ? document.getElementById(hash) : null
               if (element !== null) {
                 element.scrollIntoView()
-                return true
               } else {
                 // This is just a normal link to the current page so let's emulate default
                 // browser behavior by scrolling now to the top of the page.
                 window.scrollTo(0, 0)
-                return true
               }
             }
 
             // Make sure the necessary scripts and data are
             // loaded before continuing.
-            e.preventDefault()
-            window.___push(this.state.to)
+            window.___push(this.props.to)
           }
 
           return true
         }}
         {...rest}
-        to={this.state.to}
+        to={this.props.to}
         innerRef={this.handleRef}
       />
     )
@@ -178,7 +157,11 @@ GatsbyLink.contextTypes = {
   router: PropTypes.object,
 }
 
-export default polyfill(GatsbyLink)
+const withLocation = Comp => props => (
+  <Location>{location => <Comp location={location} {...props} />}</Location>
+)
+
+export default withLocation(polyfill(GatsbyLink))
 
 export const push = to => {
   window.___push(to)

packages/gatsby-react-router-scroll/src/ScrollBehaviorContext.js

@@ -1,15 +1,14 @@
 import React from "react"
-import { withRouter } from "react-router-dom"
 import ScrollBehavior from "scroll-behavior"
 import PropTypes from "prop-types"
+import { globalHistory as history } from "@reach/router/lib/history"
 
 import SessionStorage from "./StateStorage"
 
 const propTypes = {
   shouldUpdateScroll: PropTypes.func,
   children: PropTypes.element.isRequired,
   location: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired,
 }
 
 const childContextTypes = {
@@ -20,8 +19,6 @@ class ScrollContext extends React.Component {
   constructor(props, context) {
     super(props, context)
 
-    const { history } = props
-
     this.scrollBehavior = new ScrollBehavior({
       addTransitionHook: history.listen,
       stateStorage: new SessionStorage(),
@@ -39,21 +36,22 @@ class ScrollContext extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { location, history } = this.props
+    const { location } = this.props
     const prevLocation = prevProps.location
 
     if (location === prevLocation) {
       return
     }
 
     const prevRouterProps = {
-      history: prevProps.history,
       location: prevProps.location,
     }
 
     // The "scroll-behavior" package expects the "action" to be on the location
     // object so let's copy it over.
-    location.action = history.action
+    if (!location.action) {
+      location.action = `push`
+    }
     this.scrollBehavior.updateScroll(prevRouterProps, { history, location })
   }
 
@@ -101,4 +99,4 @@ class ScrollContext extends React.Component {
 ScrollContext.propTypes = propTypes
 ScrollContext.childContextTypes = childContextTypes
 
-export default withRouter(ScrollContext)
+export default ScrollContext

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

@@ -1,5 +1,5 @@
 // TODO add tests especially for handling prefixed links.
-import { matchPath } from "react-router-dom"
+import { match as matchPath } from "@reach/router/lib/utils"
 import stripPrefix from "./strip-prefix"
 
 const pageCache = {}
@@ -34,40 +34,18 @@ export default (pages, pathPrefix = ``) => rawPathname => {
   // Array.prototype.find is not supported in IE so we use this somewhat odd
   // work around.
   pages.some(page => {
-    if (page.matchPath) {
-      // Try both the path and matchPath
-      if (
-        matchPath(trimmedPathname, { path: page.path }) ||
-        matchPath(trimmedPathname, {
-          path: page.matchPath,
-        })
-      ) {
-        foundPage = page
-        pageCache[trimmedPathname] = page
-        return true
-      }
-    } else {
-      if (
-        matchPath(trimmedPathname, {
-          path: page.path,
-          exact: true,
-        })
-      ) {
-        foundPage = page
-        pageCache[trimmedPathname] = page
-        return true
-      }
+    let pathToMatch = page.matchPath ? page.matchPath : page.path
+    if (matchPath(pathToMatch, trimmedPathname)) {
+      foundPage = page
+      pageCache[trimmedPathname] = page
+      return true
+    }
 
-      // Finally, try and match request with default document.
-      if (
-        matchPath(trimmedPathname, {
-          path: page.path + `index.html`,
-        })
-      ) {
-        foundPage = page
-        pageCache[trimmedPathname] = page
-        return true
-      }
+    // Finally, try and match request with default document.
+    if (matchPath(`${page.path}index.html`, trimmedPathname)) {
+      foundPage = page
+      pageCache[trimmedPathname] = page
+      return true
     }
 
     return false

packages/gatsby/cache-dir/gatsby-browser-entry.js

@@ -2,6 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import Link, { withPrefix, push, replace, navigateTo } from "gatsby-link"
 import PageRenderer from "./public-page-renderer"
+import parsePath from "./parse-path"
 
 const StaticQueryContext = React.createContext({})
 
@@ -42,6 +43,7 @@ export {
   Link,
   withPrefix,
   graphql,
+  parsePath,
   push,
   replace,
   navigateTo, // TODO: remove navigateTo for v3