Custom page

How can I create a custom page that's not a CRUD? e.g: a settings page i'm using refine v4 with react router v6

3 Replies

Hi @AngelRs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a custom page that's not a CRUD, such as a settings page, you can follow these steps using refine v4 with React Router v6. Below is a step-by-step guide: 1. Create the Custom Page Component: First, create a new component for your settings page. For example, you can create a file named SettingsPage.tsx:

   // src/pages/SettingsPage.tsx
   import React from "react";

   const SettingsPage: React.FC = () => {
     return (
       <div>
         <h1>Settings Page</h1>
         <p>This is a custom settings page.</p>
       </div>
     );
   };

   export default SettingsPage;

   // src/pages/SettingsPage.tsx
   import React from "react";

   const SettingsPage: React.FC = () => {
     return (
       <div>
         <h1>Settings Page</h1>
         <p>This is a custom settings page.</p>
       </div>
     );
   };

   export default SettingsPage;

2. Update the App Component: Next, you need to update your App.tsx file to include the new route for the settings page. Here is an example of how you can do this:

   // src/App.tsx
   import React from "react";
   import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
   import { Refine, Authenticated, ErrorComponent } from "@refinedev/core";
   import { ThemedLayoutV2, ThemedTitleV2, AuthPage } from "@refinedev/antd";
   import dataProvider from "@refinedev/simple-rest";
   import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
   import SettingsPage from "./pages/SettingsPage";
const App: React.FC = () => {
     return (
       <BrowserRouter>
         <Refine
           dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
           routerProvider={routerProvider}
           resources={[
             {
               name: "settings",
               list: SettingsPage,
               meta: { label: "Settings" },
             },
           ]}
           options={{ syncWithLocation: true }}
         >
           <Routes>
             <Route
               element={
                 <Authenticated fallback={<Outlet />}>
                   <NavigateToResource />
                 </Authenticated>
               }
             >
               <Route path="/login" element={<AuthPage type="login" />} />
             </Route>
             <Route
               element={
                 <Authenticated>
                   <ThemedLayoutV2>
                     <Outlet />
                   </ThemedLayoutV2>
                 </Authenticated>
               }
             >
               <Route path="/settings" element={<SettingsPage />} />
               <Route path="*" element={<ErrorComponent />} />
             </Route>
           </Routes>
         </Refine>
       </BrowserRouter>
     );
   };

   export default App;

   // src/App.tsx
   import React from "react";
   import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
   import { Refine, Authenticated, ErrorComponent } from "@refinedev/core";
   import { ThemedLayoutV2, ThemedTitleV2, AuthPage } from "@refinedev/antd";
   import dataProvider from "@refinedev/simple-rest";
   import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
   import SettingsPage from "./pages/SettingsPage";
const App: React.FC = () => {
     return (
       <BrowserRouter>
         <Refine
           dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
           routerProvider={routerProvider}
           resources={[
             {
               name: "settings",
               list: SettingsPage,
               meta: { label: "Settings" },
             },
           ]}
           options={{ syncWithLocation: true }}
         >
           <Routes>
             <Route
               element={
                 <Authenticated fallback={<Outlet />}>
                   <NavigateToResource />
                 </Authenticated>
               }
             >
               <Route path="/login" element={<AuthPage type="login" />} />
             </Route>
             <Route
               element={
                 <Authenticated>
                   <ThemedLayoutV2>
                     <Outlet />
                   </ThemedLayoutV2>
                 </Authenticated>
               }
             >
               <Route path="/settings" element={<SettingsPage />} />
               <Route path="*" element={<ErrorComponent />} />
             </Route>
           </Routes>
         </Refine>
       </BrowserRouter>
     );
   };

   export default App;

3. Navigate to the Custom Page: Now, you can navigate to your custom settings page by going to the /settings route in your application. By following these steps, you can create a custom page in your refine application that is not tied to CRUD operations. This approach leverages the flexibility of refine and React Router v6 to add any custom pages you need. For more detailed examples and information, you can refer to the official documentation (https://refine.dev/docs/guides-concepts/usage-with-existing-projects/#headless-examples). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@343119484942549012> kapa.ai is still learning and improving, please let us know how it did by reacting below

rising-crimson•2w ago

This screen should only be accessible if the user is authenticated, I'm using <Authenticated> for that, but for some reason I'm getting on a redirect loop