diff --git a/demo/about.js b/demo/about.js
index ddd1d10..756bdb9 100644
--- 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 => (
diff --git a/demo/count.js b/demo/count.js
index 192f2d4..0279f66 100644
--- 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
index 839a66d..8d4e7cf 100644
--- 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
index 9301e5e..fca09fb 100644
--- 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
index ed80d10..efbc187 100644
--- 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
index 69c4155..6c4fecc 100644
--- 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
index fc1854f..2afa347 100644
--- 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
index 3f519ec..3270ade 100644
--- 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
index 5a58375..4c04bde 100644
--- 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 = [] }) => (
diff --git a/src/Library.js b/src/Library.js
index 4d9ad57..b249cb5 100644
--- 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
index 72da1ff..459cf20 100644
--- 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 }) => }
+
+)
+
+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
index e1a757b..fc3cd29 100644
--- 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
+}) => (
+ {
+ 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
index 5c76d75..032bc4f 100644
--- 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 }) => (
+
+ {(props) => {
+ const { pathname } = props.location
+ const route = routes.find(r => r.path === pathname || r.href === pathname) || { props: {} }
+ return render({ ...props, route })
+ }}
+
+)
+
+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 => (
-
+
{routes.map(({ Component, ...route }) => (
(
))}
}
/>
-
+
)
return (
-
+
@@ -174,7 +176,7 @@ export default class Root extends React.Component {
{!disableScroll && }
-
+
)
}
}
diff --git a/src/index.js b/src/index.js
index 78ed264..ad70526 100644
--- 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
index ca35429..2193b85 100644
--- 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 }) => }
+
+)
+
+export const link = withLocation(({
href = '',
- match,
location,
children,
className,