[WIP] Switch to @reach/router

ryanflorence · ryanflorence · commit f90d8cd669ba · 2018-08-07T20:59:05.000-07:00
- adds more accessible route transitions
- decreases bundle size
- supports relative links
diff --git a/demo/about.js b/demo/about.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from '@reach/router'
 
 export default props => (
   <div>
diff --git a/demo/count.js b/demo/count.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from '@reach/router'
 
 export default class extends React.Component {
   static getInitialProps = async () => {
diff --git a/docs/_app.js b/docs/_app.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import * as scope from 'rebass'
-import { Link } from 'react-router-dom'
+import { Link } from '@reach/router'
 import { ScopeProvider, SidebarLayout } from '../components'
 import {
   Provider as RebassProvider,
diff --git a/docs/_layout.js b/docs/_layout.js
@@ -7,7 +7,7 @@ import {
   Caps,
   BlockLink,
 } from 'rebass'
-import { Link } from 'react-router-dom'
+import { Link } from '@reach/router'
 import { Logo } from '@compositor/logo'
 
 export default ({ children }) =>
diff --git a/docs/custom-app.md b/docs/custom-app.md
@@ -11,7 +11,7 @@ This file can be used for custom layouts, including headers, footers, and naviga
 ```jsx
 // _app.js
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from '@reach/router'
 import {
   Container,
   Toolbar,
diff --git a/docs/index.js b/docs/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from '@reach/router'
 import styled from 'styled-components'
 import {
   Container,
diff --git a/lib/build.js b/lib/build.js
@@ -6,7 +6,7 @@ const { generateJSReferences } = require('mini-html-webpack-plugin')
 const merge = require('webpack-merge')
 const React = require('react')
 const { renderToString, renderToStaticMarkup } = require('react-dom/server')
-const { StaticRouter } = require('react-router-dom')
+const { ServerLocation } = require('@reach/router')
 const semver = require('semver')
 const rimraf = require('rimraf')
 const util = require('util')
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@mdx-js/loader": "^0.11.0",
     "@mdx-js/mdx": "^0.10.1",
     "@mdx-js/tag": "^0.11.0",
+    "@reach/router": "^1.1.1",
     "@rebass/markdown": "^1.0.0-1",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
@@ -63,8 +64,6 @@
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.4.1",
     "react-live": "^1.10.1",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
     "react-scope-provider": "^1.0.0-1",
     "read-pkg-up": "^3.0.0",
     "rebass": "^2.0.0-6",
diff --git a/src/FileList.js b/src/FileList.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from '@reach/router'
 
 export default ({ routes = [] }) => (
   <React.Fragment>
diff --git a/src/Library.js b/src/Library.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from '@reach/router'
 import styled from 'styled-components'
 import {
   style,
diff --git a/src/ScrollTop.js b/src/ScrollTop.js
@@ -1,10 +1,17 @@
 import React from 'react'
-import { withRouter } from 'react-router-dom'
+import { Location } from '@reach/Router'
 
-export default withRouter(class extends React.Component {
+const withLocation = Comp => props => (
+  <Location>
+    {({ location }) => <Comp location={location} {...props} />}
+  </Location>
+)
+
+export default withLocation(class extends React.Component {
   componentDidUpdate (prev) {
-    const { pathname, hash } = this.props.location
-    if (prev.location.pathname !== pathname) {
+    const { hash } = this.props.location
+
+    if (prev.location !== this.props.location) {
       window.scrollTo(0, 0)
     }
 
diff --git a/src/SidebarLayout.js b/src/SidebarLayout.js
@@ -1,9 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  Link as RouterLink,
-  NavLink as RouterNavLink
-} from 'react-router-dom'
+import { Link as RouterLink } from '@reach/router'
 import styled from 'styled-components'
 import {
   Provider as RebassProvider,
@@ -23,6 +20,28 @@ import {
 } from 'rebass'
 import { borderColor, themeGet } from 'styled-system'
 
+// const RouterNavLink = RouterLink
+const RouterNavLink = ({
+  activeClassName="active",
+  activeStyle,
+  style,
+  className,
+  exact,
+  ...props
+}) => (
+  <RouterLink getProps={({ isCurrent, isPartiallyCurrent }) => {
+    const isActive = (exact && isCurrent) || isPartiallyCurrent
+    if (isActive) {
+      return {
+        className: [ className, activeClassName ].join(' '),
+        style: { ...style, ...activeStyle }
+      }
+    } else {
+      return { className, style }
+    }
+  }} {...props}/>
+)
+
 const breakpoint = `@media screen and (min-width: 48em)`
 
 export const Root = styled(Flex)([], {
diff --git a/src/entry.js b/src/entry.js
@@ -3,13 +3,11 @@ import path from 'path'
 import React from 'react'
 import { render, hydrate } from 'react-dom'
 import {
-  StaticRouter,
-  BrowserRouter,
-  Switch,
-  Route,
+  ServerLocation,
+  Router,
   Link,
-  withRouter
-} from 'react-router-dom'
+  Location
+} from '@reach/router'
 import { Provider as RebassProvider } from 'rebass'
 import minimatch from 'minimatch'
 import sortBy from 'lodash.sortby'
@@ -41,7 +39,7 @@ const initialComponents = getComponents(req)
 
 const DefaultApp = props => props.children
 
-const Router = IS_CLIENT ? BrowserRouter : StaticRouter
+const Wrapper = IS_CLIENT ? React.Fragment : ServerLocation
 const appPath = req.keys().find(key => key === './_app.js')
 const App = appPath ? (req(appPath).default || req(appPath)) : DefaultApp
 
@@ -96,11 +94,17 @@ export const getRoutes = async (components = initialComponents) => {
   return sorted
 }
 
-const RouterState = withRouter(({ render, ...props }) => {
-  const { pathname } = props.location
-  const route = props.routes.find(r => r.path === pathname || r.href === pathname) || { props: {} }
-  return render({ ...props, route })
-})
+const RouterState = ({ render, routes }) => (
+  <Location>
+    {(props) => {
+      const { pathname } = props.location
+      const route = routes.find(r => r.path === pathname || r.href === pathname) || { props: {} }
+      return render({ ...props, route })
+    }}
+  </Location>
+)
+
+const Route = ({ render, ...props }) => render(props)
 
 export default class Root extends React.Component {
   static defaultProps = {
@@ -124,10 +128,10 @@ export default class Root extends React.Component {
       : FileList
 
     const render = appProps => (
-      <Switch>
+      <Router basepath={basename}>
         {routes.map(({ Component, ...route }) => (
           <Route
-            {...route}
+            path={route.path}
             render={props => (
               <Catch>
                 <CenteredLayout
@@ -143,16 +147,14 @@ export default class Root extends React.Component {
           />
         ))}
         <Route
+          default
           render={props => <NotFound {...props} routes={routes} />}
         />
-      </Switch>
+      </Router>
     )
 
     return (
-      <Router
-        context={{}}
-        basename={basename}
-        location={path}>
+      <Wrapper url={path}>
         <React.Fragment>
           <RebassProvider>
             <ScopeProvider>
@@ -174,7 +176,7 @@ export default class Root extends React.Component {
           </RebassProvider>
           {!disableScroll && <ScrollTop />}
         </React.Fragment>
-      </Router>
+      </Wrapper>
     )
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,5 @@
-export { Link, NavLink } from 'react-router-dom'
+export { Link } from '@reach/router'
+export { Link as NavLink } from '@reach/router'
 export { default as Catch } from './Catch'
 export { default as CenteredLayout } from './CenteredLayout'
 export { default as FileList } from './FileList'
diff --git a/src/scope.js b/src/scope.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { withRouter, Link } from 'react-router-dom'
+import { Location, Link } from '@reach/router'
 import rebassMarkdown from '@rebass/markdown'
 import { Pre } from 'rebass'
 import { MDXTag } from '@mdx-js/tag'
@@ -11,9 +11,14 @@ const cleanHREF = href => href
   .replace(/\.mdx?$/, '')
   .replace(/\.jsx?$/, '')
 
-export const link = withRouter(({
+const withLocation = (Comp) => props => (
+  <Location>
+    {({ location }) => <Comp location={location} {...props} />}
+  </Location>
+)
+
+export const link = withLocation(({
   href = '',
-  match,
   location,
   children,
   className,
