fix: Add note for using react-router function with hooks

v2/emailpassword/common-customizations/email-verification/about.mdx

@@ -172,6 +172,18 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [/* Other pre built UI */ EmailVerificationPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">

v2/emailpassword/quickstart/frontend-setup.mdx

@@ -406,6 +406,18 @@ class App extends React.Component {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [^{recipePreBuiltUINameCapitalLetters}]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </TabItem>
 
 <TabItem value="v5">

v2/mfa/email-sms-otp/otp-for-all-users.mdx

@@ -404,6 +404,18 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [EmailPasswordPreBuiltUI, ThirdPartyPreBuiltUI, PasswordlessPreBuiltUI, MultiFactorAuthPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">
@@ -1056,6 +1068,18 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [EmailPasswordPreBuiltUI, ThirdPartyPreBuiltUI, PasswordlessPreBuiltUI, MultiFactorAuthPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">

v2/mfa/legacy-method/pre-built-ui/protecting-routes.mdx

@@ -67,3 +67,15 @@ function App() {
     );
 }
 ```
+
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [ThirdPartyPreBuiltUI, EmailPasswordPreBuiltUI, PasswordlessPreBuiltUI, MultiFactorAuthPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::

v2/mfa/legacy-method/pre-built-ui/showing-login-ui.mdx

@@ -204,3 +204,15 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [ThirdPartyPreBuiltUI, EmailPasswordPreBuiltUI, PasswordlessPreBuiltUI, MultiFactorAuthPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+

v2/mfa/totp/totp-for-all-users.mdx

@@ -327,6 +327,18 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDOM, [/* ... */ TOTPPreBuiltUI, MultiFactorAuthPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">
@@ -1266,6 +1278,18 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDOM, [/* ... */ TOTPPreBuiltUI, MultiFactorAuthPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">

v2/passwordless/common-customizations/email-verification/about.mdx

@@ -172,6 +172,18 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDOM, [/* Other pre built UI */ EmailVerificationPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">

v2/passwordless/quickstart/frontend-setup.mdx

@@ -432,6 +432,18 @@ class App extends React.Component {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [^{recipePreBuiltUINameCapitalLetters}]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </TabItem>
 
 <TabItem value="v5">

v2/src/components/reusableSnippets/angularUIImplementation.tsx

@@ -5,7 +5,6 @@ export default function AngularUIImplementation(props: PropsWithChildren<{}>) {
   return (
     <Question
       question="What type of UI are you using?"
-      persistentId="angular-ui"
     >
     {props.children}
     </Question>

v2/src/components/reusableSnippets/vueUIImplementation.tsx

@@ -5,7 +5,6 @@ export default function VueUIImplementation(props: PropsWithChildren<{}>) {
   return (
     <Question
       question="What type of UI are you using?"
-      persistentId="vue-ui"
     >
     {props.children}
     </Question>

v2/thirdparty/common-customizations/email-verification/about.mdx

@@ -169,6 +169,18 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDOM, [/* Other pre built UI */ EmailVerificationPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">

v2/thirdparty/quickstart/frontend-setup.mdx

@@ -431,6 +431,18 @@ class App extends React.Component {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [^{recipePreBuiltUINameCapitalLetters}]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </TabItem>
 
 <TabItem value="v5">

v2/thirdpartyemailpassword/common-customizations/email-verification/about.mdx

@@ -169,6 +169,18 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDOM, [/* Other pre built UI */ EmailVerificationPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">

v2/thirdpartyemailpassword/quickstart/frontend-setup.mdx

@@ -438,6 +438,18 @@ class App extends React.Component {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [^{recipePreBuiltUINameCapitalLetters}]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </TabItem>
 
 <TabItem value="v5">

v2/thirdpartypasswordless/common-customizations/email-verification/about.mdx

@@ -169,6 +169,18 @@ function App() {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDOM, [/* Other pre built UI */ EmailVerificationPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">

v2/thirdpartypasswordless/quickstart/frontend-setup.mdx

@@ -479,6 +479,18 @@ class App extends React.Component {
 }
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [^{recipePreBuiltUINameCapitalLetters}]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </TabItem>
 
 <TabItem value="v5">

v2/unified-login/multiple-frontends-with-a-single-backend.mdx

@@ -466,6 +466,18 @@ class App extends React.Component {
 
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [OAuth2ProviderPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">

v2/unified-login/multiple-frontends-with-separate-backends.mdx

@@ -303,6 +303,18 @@ class App extends React.Component {
 
 ```
 
+:::important
+If you are using `useRoutes` or `createBrowserRouter` or have routes defined in a different file, use it in the following way. Please see [this issue](https://github.com/supertokens/supertokens-auth-react/issues/581#issuecomment-1246998493) for further details.
+```tsx
+const routes = getSuperTokensRoutesForReactRouterDom(reactRouterDom, [OAuth2ProviderPreBuiltUI]);
+// createBrowserRouter also works in the following way
+const router = useRoutes([
+    ...routes.map(route => route.props),
+    // Define more routes
+])
+```
+:::
+
 </Answer>
 
 <Answer title="No">