Remove auto-escaping from <NavLink>

Escaping should be done by the end user and the path passed directly
through to the underlying <Route>.

Also, update tests.

Author: mjackson

packages/react-router-dom/modules/Link.js

@@ -1,11 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import invariant from "invariant";
 import { createLocation } from "history";
+import invariant from "invariant";
+
 import RouterContext from "./RouterContext";
 
-const isModifiedEvent = event =>
-  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+function isModifiedEvent(event) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
 
 /**
  * The public API for rendering a history-aware <a>.
@@ -15,7 +17,7 @@ class Link extends React.Component {
     replace: false
   };
 
-  handleClick = (event, history) => {
+  handleClick(event, context) {
     if (this.props.onClick) this.props.onClick(event);
 
     if (
@@ -26,37 +28,32 @@ class Link extends React.Component {
     ) {
       event.preventDefault();
 
-      const { replace, to } = this.props;
+      const method = this.props.replace
+        ? context.history.replace
+        : context.history.push;
 
-      if (replace) {
-        history.replace(to);
-      } else {
-        history.push(to);
-      }
+      method(this.props.to);
     }
-  };
+  }
 
   render() {
-    const { replace, to, innerRef, ...props } = this.props; // eslint-disable-line no-unused-vars
-
-    invariant(to !== undefined, 'You must specify the "to" property');
+    const { innerRef, replace, to, ...props } = this.props; // eslint-disable-line no-unused-vars
 
     return (
       <RouterContext.Consumer>
-        {router => {
-          invariant(router, "You should not use <Link> outside a <Router>");
+        {context => {
+          invariant(context, "You should not use <Link> outside a <Router>");
 
-          const { history } = router;
           const location =
             typeof to === "string"
-              ? createLocation(to, null, null, history.location)
+              ? createLocation(to, null, null, context.location)
               : to;
+          const href = location ? context.history.createHref(location) : "";
 
-          const href = history.createHref(location);
           return (
             <a
               {...props}
-              onClick={event => this.handleClick(event, history)}
+              onClick={event => this.handleClick(event, context)}
               href={href}
               ref={innerRef}
             />
@@ -68,12 +65,14 @@ class Link extends React.Component {
 }
 
 if (__DEV__) {
+  const toType = PropTypes.oneOfType([PropTypes.string, PropTypes.object]);
+
   Link.propTypes = {
+    innerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     onClick: PropTypes.func,
-    target: PropTypes.string,
     replace: PropTypes.bool,
-    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-    innerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+    target: PropTypes.string,
+    to: toType.isRequired
   };
 }
 

packages/react-router-dom/modules/NavLink.js

@@ -4,46 +4,48 @@ import PropTypes from "prop-types";
 import Route from "./Route";
 import Link from "./Link";
 
+function joinClassnames(...classnames) {
+  return classnames.filter(i => i).join(" ");
+}
+
 /**
  * A <Link> wrapper that knows if it's "active" or not.
  */
 function NavLink({
-  to,
-  exact,
-  strict,
-  location,
+  "aria-current": ariaCurrent,
   activeClassName,
-  className,
   activeStyle,
-  style,
-  isActive: getIsActive,
-  "aria-current": ariaCurrent,
+  className: classNameProp,
+  exact,
+  isActive: isActiveProp,
+  location,
+  strict,
+  style: styleProp,
+  to,
   ...rest
 }) {
-  const path = typeof to === "object" ? to.pathname : to;
-
-  // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202
-  const escapedPath = path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
-
   return (
     <Route
-      path={escapedPath}
+      path={typeof to === "object" ? to.pathname : to}
       exact={exact}
       strict={strict}
       location={location}
       children={({ location, match }) => {
-        const isActive = !!(getIsActive ? getIsActive(match, location) : match);
+        const isActive = !!(isActiveProp
+          ? isActiveProp(match, location)
+          : match);
+
+        const className = isActive
+          ? joinClassnames(classNameProp, activeClassName)
+          : classNameProp;
+        const style = isActive ? { ...styleProp, ...activeStyle } : styleProp;
 
         return (
           <Link
-            to={to}
-            className={
-              isActive
-                ? [className, activeClassName].filter(i => i).join(" ")
-                : className
-            }
-            style={isActive ? { ...style, ...activeStyle } : style}
             aria-current={(isActive && ariaCurrent) || null}
+            className={className}
+            style={style}
+            to={to}
             {...rest}
           />
         );
@@ -53,29 +55,31 @@ function NavLink({
 }
 
 NavLink.defaultProps = {
-  activeClassName: "active",
-  "aria-current": "page"
+  "aria-current": "page",
+  activeClassName: "active"
 };
 
 if (__DEV__) {
+  const ariaCurrentType = PropTypes.oneOf([
+    "page",
+    "step",
+    "location",
+    "date",
+    "time",
+    "true"
+  ]);
+
   NavLink.propTypes = {
-    to: Link.propTypes.to,
-    exact: PropTypes.bool,
-    strict: PropTypes.bool,
-    location: PropTypes.object,
+    "aria-current": ariaCurrentType,
     activeClassName: PropTypes.string,
-    className: PropTypes.string,
     activeStyle: PropTypes.object,
-    style: PropTypes.object,
+    className: PropTypes.string,
+    exact: Route.propTypes.exact,
     isActive: PropTypes.func,
-    "aria-current": PropTypes.oneOf([
-      "page",
-      "step",
-      "location",
-      "date",
-      "time",
-      "true"
-    ])
+    location: PropTypes.object,
+    strict: Route.propTypes.strict,
+    style: PropTypes.object,
+    to: Link.propTypes.to
   };
 }