fix: useParams will give the same result no matter where it is used (…

…#526)

packages/router-react/src/__tests__/__snapshots__/nested-params.test.js.snap

@@ -3,11 +3,12 @@
 exports[`nested routes gets all params from parent routes 1`] = `
 <div>
   <h1>
-    Users
+    Users:
+    michael
   </h1>
   <div>
     <h1>
-      User: 
+      User:
       michael
     </h1>
     <div>
@@ -16,9 +17,9 @@ exports[`nested routes gets all params from parent routes 1`] = `
       </h1>
       <div>
         <h1>
-          User: 
+          User:
           michael
-          , course 
+          , course
           routing
         </h1>
       </div>

packages/router-react/src/__tests__/nested-params.test.js

@@ -5,9 +5,10 @@ import { MemoryRouter as Router, useParams, RouterView } from '..';
 describe('nested routes', () => {
   it('gets all params from parent routes', () => {
     function Users() {
+      let { username } = useParams();
       return (
         <div>
-          <h1>Users</h1>
+          <h1>Users:{username}</h1>
           <RouterView />
         </div>
       );
@@ -17,7 +18,7 @@ describe('nested routes', () => {
       let { username } = useParams();
       return (
         <div>
-          <h1>User: {username}</h1>
+          <h1>User:{username}</h1>
           <RouterView />
         </div>
       );
@@ -40,7 +41,7 @@ describe('nested routes', () => {
       return (
         <div>
           <h1>
-            User: {username}, course {courseId}
+            User:{username}, course{courseId}
           </h1>
         </div>
       );

packages/router-react/src/hooks.tsx

@@ -150,7 +150,7 @@ export function useNavigate(): INavigateFunction {
  * URL that were matched by the route path.
  */
 export function useParams(): IParams {
-  return useContext(MatchedRouteContext).params;
+  return useContext(RouteContext).params;
 }
 
 /**