❓ I have no idea why I didn't commit these earlier

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bluelib",
-    "version": "0.23.3",
+    "version": "0.24.0",
     "description": "React components for Bluelib",
     "main": "lib/index.js",
     "module": "es/index.js",
@@ -16,15 +16,16 @@
         "start": "styleguidist server"
     },
     "dependencies": {
+        "@babel/preset-env": "^7.12.11",
+        "@babel/preset-react": "^7.12.10",
+        "@reach/router": "^1.3.4",
         "classnames": "^2.2.6",
         "mathjax-react": "^1.0.6",
         "prop-types": "^15.7.2",
-        "react-syntax-highlighter": "^15.4.3",
-        "strip-indent": "^3.0.0",
-        "@babel/preset-env": "^7.12.11",
-        "@babel/preset-react": "^7.12.10",
         "react": "^17.0.1",
-        "react-dom": "^17.0.1"
+        "react-dom": "^17.0.1",
+        "react-syntax-highlighter": "^15.4.3",
+        "strip-indent": "^3.0.0"
     },
     "peerDependencies": {
         "react": "16.x"

src/components/Anchor/index.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 
 export default function Anchor({children, className, href}) {
     return (
-        <a className={useBluelibClassNames("element-anchor", className)} href={href}>
+        <a className={useBluelibClassNames(`element-anchor`, className)} href={href}>
             {children}
         </a>
     )
@@ -15,5 +15,5 @@ export default function Anchor({children, className, href}) {
 Anchor.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    href: PropTypes.string,
+    href: PropTypes.string
 }

src/components/BaseLink/Readme.md

@@ -0,0 +1,3 @@
+A router-aware version of [`<Anchor>`](#anchor). It becomes bold if the current location matches its `href` property, 
+and can be disabled with the `disabled` prop.
+

src/components/BaseLink/index.js

@@ -0,0 +1,42 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+import { Link, useMatch } from "@reach/router"
+
+
+export default function BaseLink({children, className, href, disabled}) {
+    const locationMatch = useMatch(href);
+
+    const activeClassNames = useBluelibClassNames("style-bold", className);
+    if(locationMatch) {
+        return (
+            <span className={activeClassNames}>
+                {children}
+            </span>
+        )
+    }
+
+    const disabledClassNames = useBluelibClassNames("element-anchor status-disabled", className);
+    if(disabled) {
+        return (
+            <span className={disabledClassNames}>
+                {children}
+            </span>
+        )
+    }
+
+    const enabledClassNames = useBluelibClassNames("element-anchor", className)
+    return (
+        <Link to={href} className={enabledClassNames}>
+            {children}
+        </Link>
+    )
+}
+
+
+BaseLink.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    href: PropTypes.string,
+    disabled: PropTypes.bool,
+}

src/components/index.js

@@ -20,3 +20,4 @@ export {default as Strike} from "./Strike";
 export {default as Table} from "./Table";
 export {default as Title} from "./Title";
 export {default as Underline} from "./Underline";
+export {default as BaseLink} from "./BaseLink";

src/hooks/useBluelibClassNames.js

@@ -9,10 +9,16 @@ export default function useBluelibClassNames(cn, extra) {
     const bluelibSkin = useContext(contextBluelibSkin);
 
     // Split class names
+    if(typeof(cn) === "string") {
         cn = cn.split(" ");
+    }
 
     // Get bluelib skeleton and skin class names
     cn = cn.map(c => {
+        if(!c) {
+            return null;
+        }
+
         return classNames(skeleton[c], bluelibSkin ? bluelibSkin[c] : null)
     });