feat: merge link and base link

.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     requireConfigFile: false,
   },
   rules: {
+    'react/prop-types': 'off',
     'prettier/prettier': 'error',
   },
 };

package.json

@@ -63,6 +63,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.5",
     "@restart/context": "^2.1.4",
+    "@restart/hooks": "^0.4.5",
     "@types/react": ">=17.0.37",
     "dequal": "^2.0.2",
     "farce": "^0.4.5",

src/Link.js

@@ -1,7 +1,108 @@
-import BaseLink from './BaseLink';
-import withRouter from './withRouter';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import React from 'react';
+import warning from 'tiny-warning';
 
-const Link = withRouter(BaseLink);
-Link.displayName = 'Link';
+import useRouter from './useRouter';
+
+function Link({
+  as: Component = 'a',
+  to,
+  activeClassName,
+  activeStyle,
+  activePropName,
+  match: propsMatch,
+  router: propsRouter,
+  exact = false,
+  onClick,
+  target,
+  ...props
+}) {
+  const { router, match } = useRouter() || {
+    match: propsMatch,
+    router: propsRouter,
+  };
+
+  const handleClick = useEventCallback((event) => {
+    if (onClick) {
+      onClick(event);
+    }
+
+    // Don't do anything if the user's onClick handler prevented default.
+    // Otherwise, let the browser handle the link with the computed href if the
+    // event wasn't an unmodified left click, or if the link has a target other
+    // than _self.
+    if (
+      event.defaultPrevented ||
+      event.metaKey ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.button !== 0 ||
+      (target && target !== '_self')
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+
+    // FIXME: When clicking on a link to the same location in the browser, the
+    // actual becomes a replace rather than a push. We may want the same
+    // handling – perhaps implemented in the Farce protocol.
+    router.push(to);
+  });
+
+  if (__DEV__ && typeof Component !== 'function') {
+    for (const wrongPropName of ['component', 'Component']) {
+      const wrongPropValue = props[wrongPropName];
+      if (!wrongPropValue) {
+        continue;
+      }
+
+      warning(
+        false,
+        'Link to %s with `%s` prop `%s` has an element type that is not a component. The expected prop for the link component is `as`.',
+        JSON.stringify(to),
+        wrongPropName,
+        wrongPropValue.displayName || wrongPropValue.name || 'UNKNOWN',
+      );
+    }
+  }
+
+  const href = router.createHref(to);
+  const childrenIsFunction = typeof props.children === 'function';
+
+  if (childrenIsFunction || activeClassName || activeStyle || activePropName) {
+    const toLocation = router.createLocation(to);
+    const active = router.isActive(match, toLocation, { exact });
+
+    if (childrenIsFunction) {
+      return props.children({ href, active, onClick: handleClick });
+    }
+
+    if (active) {
+      if (activeClassName) {
+        props.className = props.className
+          ? `${props.className} ${activeClassName}`
+          : activeClassName;
+      }
+
+      if (activeStyle) {
+        props.style = { ...props.style, ...activeStyle };
+      }
+    }
+
+    if (activePropName) {
+      props[activePropName] = active;
+    }
+  }
+
+  return (
+    <Component
+      {...props}
+      href={href}
+      onClick={handleClick} // This overrides props.onClick.
+    />
+  );
+}
 
 export default Link;

src/index.js

@@ -1,5 +1,4 @@
 export ActionTypes from './ActionTypes';
-export BaseLink from './BaseLink';
 export createBaseRouter from './createBaseRouter';
 export createBrowserRouter from './createBrowserRouter';
 export createConnectedRouter from './createConnectedRouter';

test/BaseLink.test.js

@@ -1,7 +1,7 @@
 import { mount } from 'enzyme';
 import React from 'react';
 
-import BaseLink from '../src/BaseLink';
+import BaseLink from '../src/Link';
 
 const CustomComponent = () => <div />;
 

yarn.lock

@@ -1576,6 +1576,13 @@
   resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"
   integrity sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==
 
+"@restart/hooks@^0.4.5":
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.5.tgz#e7acbea237bfc9e479970500cf87538b41a1ed02"
+  integrity sha512-tLGtY0aHeIfT7aPwUkvQuhIy3+q3w4iqmUzFLPlOAf/vNUacLaBt1j/S//jv/dQhenRh8jvswyMojCwmLvJw8A==
+  dependencies:
+    dequal "^2.0.2"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"