feat: use @reach/router instead of react-router

core/docz-core/src/bundler/plugins.ts

@@ -59,8 +59,7 @@ export const injections = (config: Config, args: Args, env: Env) => {
     {
       ...getClientEnvironment(base).stringified,
       NODE_ENV: stringify(env),
-      DOCZ_BASE_URL: args.hashRouter ? stringify('/') : stringify(base),
-      DOCZ_HASH_ROUTER: stringify(args.hashRouter || false),
+      DOCZ_BASE_URL: stringify(base),
     },
   ])
 }

core/docz-core/src/config/argv.ts

@@ -81,7 +81,6 @@ export interface Argv {
    * this property will be deleted in the v1.0
    */
   ordering: 'ascending' | 'descending'
-  hashRouter: boolean
   wrapper?: string
   indexHtml?: string
   /** slugify separator */
@@ -195,10 +194,6 @@ export const setArgs = (yargs: Yargs) => {
       type: 'number',
       default: getEnv('docz.websocket.port', 60505),
     })
-    .option('hashRouter', {
-      type: 'boolean',
-      default: getEnv('docz.hash.router', false),
-    })
     .option('native', {
       type: 'boolean',
       default: getEnv('docz.native', false),

core/docz-core/templates/root.tpl.js

@@ -15,9 +15,7 @@ const Root = () => {
       linkComponent={Link}
       db={database}
       >
-      <Router>
         <Routes imports={imports} />
-      </Router>
     </Theme>
   )
 }

core/docz-theme-default/package.json

@@ -38,8 +38,8 @@
     "styled-components": "^4.1.3"
   },
   "peerDependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.121",

core/docz-theme-default/src/components/shared/Sidebar/MenuHeadings.tsx

@@ -47,9 +47,6 @@ const createSmallLink = (Link: React.ComponentType<any>) => styled(Link)`
   }
 `
 
-const isSmallLinkActive = (slug: string) => (m: any, location: any) =>
-  slug === location.hash.slice(1, Infinity)
-
 const getHeadings = (route: string, docs: Entry[]) => {
   const doc = docs.find(doc => doc.route === route)
   const headings = get(doc, 'headings')
@@ -74,7 +71,6 @@ export const MenuHeadings: SFC<MenuHeadingsProps> = ({ route, onClick }) => {
           key={heading.slug}
           onClick={onClick}
           to={`${route}#${heading.slug}`}
-          isActive={isSmallLinkActive(heading.slug)}
         >
           {heading.value}
         </SmallLink>

core/docz/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@loadable/component": "^5.6.0",
     "@mdx-js/tag": "^0.17.5",
+    "@reach/router": "^1.2.1",
     "array-sort": "^1.0.0",
     "capitalize": "^2.0.0",
     "deepmerge": "^3.2.0",
@@ -36,17 +37,15 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
-    "react-router-hash-link": "^1.2.1",
     "ulid": "^2.3.0",
     "yargs": "^13.2.1"
   },
   "peerDependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@types/loadable__component": "^5.6.0"
+    "@types/loadable__component": "^5.6.0",
+    "@types/reach__router": "^1.2.3"
   }
 }

core/docz/src/components/AsyncRoute.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useEffect, SFC } from 'react'
+import { SFC } from 'react'
 import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
 import loadable from '@loadable/component'
 
@@ -43,16 +43,6 @@ export const AsyncRoute: SFC<AsyncRouteProps> = defaultProps => {
   const Component: any = asyncComponent
   const props = { ...routeProps, doc: entry }
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (typeof window !== 'undefined' && location.hash) {
-        const id: string = location.hash.substring(1)
-        const el: HTMLElement | null = document.getElementById(id)
-        if (el) el.scrollIntoView()
-      }
-    })
-  }, [])
-
   return Page ? (
     <Page {...props}>
       <Component {...props} />

core/docz/src/components/DocPreview.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Fragment, SFC, ComponentType as CT } from 'react'
-import { RouteComponentProps } from 'react-router-dom'
+import { RouteComponentProps } from '@reach/router'
 import { MDXProvider } from '@mdx-js/tag'
 
 import { Entry } from '../state'

core/docz/src/components/Link.tsx

@@ -1,7 +1,23 @@
 import * as React from 'react'
-import { SFC } from 'react'
-import { NavLinkProps as LinkProps } from 'react-router-dom'
-import { NavHashLink as NavLink } from 'react-router-hash-link'
+import { useCallback } from 'react'
+import { Link as BaseLink, LinkProps, LinkGetProps } from '@reach/router'
 
-export const Link: SFC<LinkProps> = props => <NavLink {...props} exact={true} />
 export { LinkProps }
+export const Link = React.forwardRef<any, LinkProps<any>>((props, ref) => {
+  const isActive = useCallback(
+    ({ isCurrent, location }: LinkGetProps) => {
+      const hrefHash = props.to && props.to.split('#')
+      const slug = hrefHash && Array.isArray(hrefHash) && hrefHash[1]
+      const isActive =
+        slug && location.hash && slug === location.hash.slice(1, Infinity)
+      return isCurrent || isActive
+        ? { className: `${props.className} active` }
+        : {}
+    },
+    [props.to, props.className]
+  )
+
+  return <BaseLink {...props} getProps={isActive} ref={ref} />
+})
+
+Link.displayName = 'Link'

core/docz/src/components/Routes.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react'
-import { SFC, useContext } from 'react'
-import { Switch, Route } from 'react-router-dom'
+import { SFC, useMemo, useContext, useEffect } from 'react'
 import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
+import {
+  LocationProvider,
+  Router,
+  createHistory,
+  HistoryListenerParameter,
+} from '@reach/router'
+
+declare var DOCZ_BASE_URL: string
 
 import { doczState } from '../state'
 import { ComponentsMap } from './DocPreview'
@@ -12,40 +19,51 @@ export interface RoutesProps {
   imports: Imports
 }
 
+const goToHash = ({ location }: HistoryListenerParameter) => {
+  setTimeout(() => {
+    if (location && location.hash) {
+      const id: string = location.hash.substring(1)
+      const el: HTMLElement | null = document.getElementById(id)
+      if (el) el.scrollIntoView()
+    }
+  })
+}
+
 export const Routes: SFC = withMDXComponents(
   ({ components, imports }: RoutesProps) => {
     const { entries } = useContext(doczState.context)
     if (!entries || !components) return null
 
     const NotFound: any = components.notFound
     const Loading: any = components.loading
+    const history = useMemo(() => createHistory(window as any), [])
+
+    useEffect(() => {
+      history.listen(goToHash)
+    }, [])
 
     return (
-      <React.Suspense fallback={<Loading />}>
-        <Switch>
-          {entries.map(({ key: path, value: entry }) => {
-            const props = { path, entries, components }
-            const component = loadRoute(path, imports, Loading)
-
-            return (
-              <Route
-                exact
-                key={entry.id}
-                path={entry.route}
-                render={routeProps => (
-                  <AsyncRoute
-                    {...routeProps}
-                    {...props}
-                    entry={entry}
-                    asyncComponent={component}
-                  />
-                )}
-              />
-            )
-          })}
-          {NotFound && <Route component={NotFound} />}
-        </Switch>
-      </React.Suspense>
+      <LocationProvider history={history}>
+        <React.Suspense fallback={<Loading />}>
+          <Router basepath={DOCZ_BASE_URL}>
+            <NotFound default />
+            {entries.map(({ key: path, value: entry }) => {
+              const props = { path, entries, components }
+              const component = loadRoute(path, imports, Loading)
+
+              return (
+                <AsyncRoute
+                  {...props}
+                  entry={entry}
+                  key={entry.id}
+                  path={entry.route}
+                  asyncComponent={component}
+                />
+              )
+            })}
+          </Router>
+        </React.Suspense>
+      </LocationProvider>
     )
   }
 )

core/docz/src/index.ts

@@ -2,7 +2,6 @@ export { AsyncRoute } from './components/AsyncRoute'
 export { Link, LinkProps } from './components/Link'
 export { Playground } from './components/Playground'
 export { PropsTable } from './components/PropsTable'
-export { Router } from './components/Router'
 export { Routes } from './components/Routes'
 
 export * from './components/DocPreview'