docs(react-router): fix blocker doc

docs/framework/react/api/router/useBlockerHook.md

@@ -137,8 +137,8 @@ import { useBlocker } from '@tanstack/react-router'
 
 function MyComponent() {
   const { proceed, reset, status } = useBlocker({
-    shouldBlockFn: ({ nextLocation }) => {
-      return !nextLocation.pathname.includes('step/')
+    shouldBlockFn: ({ next }) => {
+      return !next.pathname.includes('step/')
     },
     withResolver: true,
   })
@@ -169,8 +169,8 @@ function MyComponent() {
   const [formIsDirty, setFormIsDirty] = useState(false)
 
   useBlocker({
-    shouldBlockFn: ({ nextLocation }) => {
-      if (nextLocation.pathname.includes('step/')) {
+    shouldBlockFn: ({ next }) => {
+      if (next.pathname.includes('step/')) {
         return false
       }
 

docs/framework/react/guide/navigation-blocking.md

@@ -52,6 +52,29 @@ function MyComponent() {
 }
 ```
 
+`shouldBlockFn` gives you type safe access to the `current` and `next` location:
+
+```tsx
+import { useBlocker } from '@tanstack/react-router'
+
+function MyComponent() {
+  // always block going from /foo to /bar/123?hello=world
+  const { proceed, reset, status } = useBlocker({
+    shouldBlockFn: ({ current, next }) => {
+      return (
+        current.routeId === '/foo' &&
+        next.fullPath === '/bar/$id' &&
+        next.params.id === 123 &&
+        next.search.hello === 'world'
+      )
+    },
+    withResolver: true,
+  })
+
+  // ...
+}
+```
+
 You can find more information about the `useBlocker` hook in the [API reference](../api/router/useBlockerHook.md).
 
 ## Component-based blocking
@@ -132,7 +155,9 @@ function MyComponent() {
 
   useBlocker({
     shouldBlockFn: () => {
-      if (!formIsDirty) return false
+      if (!formIsDirty) {
+        return false
+      }
 
       const shouldLeave = new Promise<boolean>((resolve) => {
         // Using a modal manager of your choice