fix(useParams): fix issue with useParams reading from null object (#6940

)

* fix(useParams): fix issue with useParams reading from null object

fixed by returning empty object if route not mounted

Closes #6938

* test(useParams): test for unmatched route calling useParams

packages/react-router/modules/__tests__/useParams-test.js

@@ -98,4 +98,25 @@ describe("useParams", () => {
       });
     });
   });
+
+  describe("when the route isn't matched", () => {
+    it("returns empty object", () => {
+      let params;
+
+      function HomePage() {
+        params = useParams();
+        return null;
+      }
+
+      renderStrict(
+        <MemoryRouter initialEntries={["/home"]}>
+          <Route path="/not-the-current-route" children={() => <HomePage />} />
+        </MemoryRouter>,
+        node
+      );
+
+      expect(typeof params).toBe("object");
+      expect(Object.keys(params)).toHaveLength(0);
+    });
+  });
 });

packages/react-router/modules/hooks.js

@@ -36,7 +36,8 @@ export function useParams() {
     );
   }
 
-  return useContext(Context).match.params;
+  const match = useContext(Context).match;
+  return match ? match.params : {};
 }
 
 export function useRouteMatch(path) {