Merge pull request #7 from marmelab/BrowserRouter

Update the doc and jsdoc to mention that `<BrowserRouter>` is required
marmelab · Jul 10, 2023 · 39c7928 · 39c7928
2 parents 59410f1 + 2584a86
commit 39c7928
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/packages/ra-auth-auth0/Readme.md b/packages/ra-auth-auth0/Readme.md
@@ -20,6 +20,7 @@ npm install --save ra-auth-auth0
 // in src/App.tsx
 import React, { useEffect, useRef, useState } from 'react';
 import { Admin, Resource } from 'react-admin';
+import { BrowserRouter } from 'react-router-dom';
 import { Auth0AuthProvider } from 'ra-auth-auth0';
 import { Auth0Client } from '@auth0/auth0-spa-js';
 import dataProvider from './dataProvider';
@@ -41,17 +42,21 @@ const authProvider = Auth0AuthProvider(auth0, {
 
 const App = () => {
     return (
-        <Admin
-            authProvider={authProvider}
-            dataProvider={dataProvider}
-        >
-            <Resource name="posts" {...posts} />
-        </Admin>
+        <BrowserRouter>
+            <Admin
+                authProvider={authProvider}
+                dataProvider={dataProvider}
+            >
+                <Resource name="posts" {...posts} />
+            </Admin>
+        </BrowserRouter>
     );
 };
 export default App;
 ```
 
+**Note:** You need to wrap your app in a [`BrowserRouter`](https://reactrouter.com/en/6/router-components/browser-router) component from `react-router-dom` for the `Auth0AuthProvider` to work.
+
 ## `Auth0AuthProvider` Parameters
 
 -   `loginRedirectUri` - _optional_ - URI used to override the redirect URI after successful login. Defaults to react-admin `/auth-callback` route.

diff --git a/packages/ra-auth-auth0/src/authProvider.ts b/packages/ra-auth-auth0/src/authProvider.ts
@@ -8,6 +8,7 @@ import { Auth0Client } from '@auth0/auth0-spa-js';
  * ```tsx
  * import React from 'react';
  * import { Admin, Resource } from 'react-admin';
+ * import { BrowserRouter } from 'react-router-dom';
  * import { Auth0AuthProvider } from 'ra-auth-auth0';
  * import { Auth0Client } from '@auth0/auth0-spa-js';
  * import dataProvider from './dataProvider';
@@ -29,13 +30,15 @@ import { Auth0Client } from '@auth0/auth0-spa-js';
  *
  *  const App = () => {
  *   return (
+ *      <BrowserRouter>
  *        <Admin
- *            authProvider={authProvider}
- *            dataProvider={dataProvider}
- *            title="Example Admin"
- *         >
- *             <Resource name="posts" {...posts} />
- *       </Admin>
+ *          authProvider={authProvider}
+ *          dataProvider={dataProvider}
+ *          title="Example Admin"
+ *        >
+ *           <Resource name="posts" {...posts} />
+ *        </Admin>
+ *      <BrowserRouter>
  *    );
  * };
  * export default App;