docs: fix withAuthenticationRequired usage pattern in react-router example

Author: yogeshchoudhary147

EXAMPLES.md

@@ -170,12 +170,26 @@ import React from 'react';
 import { Route, BrowserRouter, Routes, useNavigate } from 'react-router-dom';
 import { Auth0Provider, withAuthenticationRequired } from '@auth0/auth0-react';
 import Profile from './Profile';
+import Settings from './Settings';
 
-const ProtectedRoute = ({ component, ...args }) => {
-  const Component = withAuthenticationRequired(component, args);
-  return <Component />;
+// Pattern 1: Direct usage at module level
+const ProtectedProfile = withAuthenticationRequired(Profile, {
+  onRedirecting: () => <div>Redirecting to login...</div>,
+});
+
+// Pattern 2: Factory pattern (use when you need router hooks in the wrapper)
+const createProtectedRoute = (Component, options) => {
+  const ProtectedComponent = withAuthenticationRequired(Component, options);
+  return () => {
+    const navigate = useNavigate(); // Can use hooks here if needed
+    return <ProtectedComponent />;
+  };
 };
 
+const ProtectedSettings = createProtectedRoute(Settings, {
+  onRedirecting: () => <div>Redirecting to login...</div>,
+});
+
 const Auth0ProviderWithRedirectCallback = ({ children, ...props }) => {
   const navigate = useNavigate();
   const onRedirectCallback = (appState) => {
@@ -200,17 +214,17 @@ export default function App() {
       >
         <Routes>
           <Route path="/" exact />
-          <Route
-            path="/profile"
-            element={<ProtectedRoute component={Profile} />}
-          />
+          <Route path="/profile" element={<ProtectedProfile />} />
+          <Route path="/settings" element={<ProtectedSettings />} />
         </Routes>
       </Auth0ProviderWithRedirectCallback>
     </BrowserRouter>
   );
 }
 ```
 
+> **Note:** Always call `withAuthenticationRequired` at the module level, not inside a component's render function. Calling HOCs inside render creates a new component on each render, causing unmount/remount cycles that break React Router's blockers and other stateful features.
+
 See [react-router example app](./examples/cra-react-router)
 
 ## Protecting a route in a Gatsby app