fix: Corrects broken legacy API links in version switcher (v6/v5) (#1173)

* fix: modify broken legacy API links in version tab (v6/v5)

* chore: fix lint error in example code

* chore: re-run prettier format (ci warning)

---------

Co-authored-by: ria-ahyoung <[email protected]>
Co-authored-by: Bill <[email protected]>

Author: 3 people

src/components/ApiGallery.tsx

@@ -18,7 +18,7 @@ export default function ApiGallery() {
 
     if (version !== 7) {
       router.push(
-        `https://react-hook-form-website-git-leagcy-hook-form.vercel.app/${version}/api`
+        `https://react-hook-form-website-git-leagcy-hook-form.vercel.app/v${version}/api`
       )
     } else {
       router.push(`/v${version}/docs/`)

src/content/docs/useformstate/errormessage.mdx

@@ -155,15 +155,18 @@ export default function App() {
 ```
 
 ```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-errormessage-multiple-error-messages-lnvkt"
-import { useForm } from "react-hook-form";
-import { ErrorMessage } from '@hookform/error-message';
-
+import { useForm } from "react-hook-form"
+import { ErrorMessage } from "@hookform/error-message"
 
 export default function App() {
-  const { register, formState: { errors }, handleSubmit } = useForm({
-    criteriaMode: "all"
-  });
-  const onSubmit = data => console.log(data);
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm({
+    criteriaMode: "all",
+  })
+  const onSubmit = (data) => console.log(data)
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -172,12 +175,12 @@ export default function App() {
           required: "This is required.",
           pattern: {
             value: /d+/,
-            message: "This input is number only."
+            message: "This input is number only.",
           },
           maxLength: {
             value: 10,
-            message: "This input exceed maxLength."
-          }
+            message: "This input exceed maxLength.",
+          },
         })}
       />
       <ErrorMessage
@@ -191,12 +194,10 @@ export default function App() {
         }
       />
 
-
       <input type="submit" />
     </form>
-  );
+  )
 }
-
 ```
 
 </TabGroup>

src/content/docs/usewatch/watch.mdx

@@ -20,31 +20,31 @@ A React Hook Form component that provides the same functionality as `useWatch`,
 | `defaultValue` | <TypeText>unknown</TypeText>                         | default value for `useWatch` to return before the initial render.<br/><br/>**Note:** the first render will always return `defaultValue` when it's supplied.                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `disabled`     | <TypeText>boolean = false</TypeText>                 | Option to disable the subscription.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | `exact`        | <TypeText>boolean = false</TypeText>                 | This prop will enable an exact match for input name subscriptions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `render`        | <TypeText>Function</TypeText>                 | Subscribes to specified form field(s) and re-renders its child function whenever the values change. This allows you to declaratively consume form values in JSX without manually wiring up state.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `render`       | <TypeText>Function</TypeText>                        | Subscribes to specified form field(s) and re-renders its child function whenever the values change. This allows you to declaratively consume form values in JSX without manually wiring up state.                                                                                                                                                                                                                                                                                                                                                                        |
 
 **Examples:**
 
 ---
 
 ```tsx copy sandbox=""
-import { useForm, Watch } from 'react-hook-form';
+import { useForm, Watch } from "react-hook-form"
 
 const App = () => {
-  const { register, control } = useForm();
+  const { register, control } = useForm()
 
   return (
     <div>
       <form>
-        <input {...register('foo')} />
-        <input {...register('bar')} />
+        <input {...register("foo")} />
+        <input {...register("bar")} />
       </form>
       {/* re-render only when value of `foo` changes */}
       <Watch
         control={control}
-        names={['foo']}
+        names={["foo"]}
         render={([foo]) => <span>{foo}</span>}
       />
     </div>
-  );
-};
+  )
+}
 ```