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
:
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:
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:
----------------------<@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