Automatically escape paths in <NavLink>

I removed this earlier in f5f2107 but
realized that was a bad move because it would be a breaking change.
Also, we probably need this since <NavLink to> serves as both the <Route
path> *and* the <Link to> value. Maybe we should have a separate prop
for <NavLink path>? I dunno.

Author: mjackson

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

@@ -24,9 +24,14 @@ function NavLink({
   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={typeof to === "object" ? to.pathname : to}
+      path={escapedPath}
       exact={exact}
       strict={strict}
       location={location}

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

@@ -99,17 +99,18 @@ describe("A <NavLink>", () => {
       }).not.toThrow();
     });
 
-    it("it handles properly escaped special characters", () => {
+    it("it automatically escapes special characters in the path", () => {
       ReactDOM.render(
         <MemoryRouter initialEntries={["/pizza (1)"]}>
-          <NavLink to="/pizza \(1\)">Pizza!</NavLink>
+          <NavLink to="/pizza (1)">Pizza!</NavLink>
         </MemoryRouter>,
         node
       );
 
       const a = node.querySelector("a");
 
       expect(a.className).toContain("active");
+      expect(a.getAttribute("href")).toEqual("/pizza (1)");
     });
 
     it("renders child components that use withRouter", () => {