like-gold•7mo ago

Nested route problems

I'm using Refine and Antd. My app.tsx: <Refine dataProvider={dataProvider(supabaseClient)} liveProvider={liveProvider(supabaseClient)} authProvider={authProvider} routerProvider={routerBindings} notificationProvider={useNotificationProvider} options={{ syncWithLocation: true, warnWhenUnsavedChanges: true, useNewQueryKeys: true, projectId: "xosAAU-v9RHzc-Ldz4wF", }} resources={[{ name: "patient", list: "/patient", create: "/patient/create", // edit: "/patient/edit/:id", // show: "/patient/show/:id" }]}> <Routes> <Route element={<ThemedLayoutV2 Header={ThemedHeaderV2} Sider={ThemedSiderV2} Title={ThemedTitleV2} > <Outlet /> </ThemedLayoutV2>}> <Route path="/patient" element={<PatientList/>}> <Route path="create" element={<PatientCreate/>} /> </Route> </Route> </Routes> <RefineKbar /> <UnsavedChangesNotifier /> <DocumentTitleHandler /> </Refine> My Create: export const PatientCreate: React.FC<PropsWithChildren> = ({ children }) => { console.log("hello") return ( <Create> <p>Some contents...</p>
</Create> ); }; It's not console logging "hello", seems like the component is now being rendered. I want the Create to be a modal rendering on top of list post.

8 Replies

kapa.ai•7mo ago

Hi @lukevo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided, it seems like you're trying to render a Create component as a modal on top of a List component. In Refine, you can achieve this by using the useModalForm hook from @refinedev/antd. This hook provides a set of properties that you can use to control a modal form. Here's an example of how you can use it:

import { useModalForm } from "@refinedev/antd";  
import { Button } from "antd";  
import { CreatePatient } from "./CreatePatient";  

export const PatientList: React.FC = () => {  
 const { modalProps, formProps, show } = useModalForm<Patient>({  
 resource: "patients",  
 action: "create",  
 redirect: "show",  
 });  
  
 return (  
 <div>  
 <Button onClick={show}>Create Patient</Button>  
 <CreatePatient modalProps={modalProps} formProps={formProps} />  
 </div>  
 );  
};

import { useModalForm } from "@refinedev/antd";  
import { Button } from "antd";  
import { CreatePatient } from "./CreatePatient";  

export const PatientList: React.FC = () => {  
 const { modalProps, formProps, show } = useModalForm<Patient>({  
 resource: "patients",  
 action: "create",  
 redirect: "show",  
 });  
  
 return (  
 <div>  
 <Button onClick={show}>Create Patient</Button>  
 <CreatePatient modalProps={modalProps} formProps={formProps} />  
 </div>  
 );  
};

In the CreatePatient component, you can use the modalProps and formProps to control the modal and form:

import { Modal, Form } from "@refinedev/antd";  

type CreatePatientProps = {  
 modalProps: ModalProps;  
 formProps: FormProps;  
};  

export const CreatePatient: React.FC<CreatePatientProps> = ({  
 modalProps,  
 formProps,  
}) => {  
 return (  
 <Modal {...modalProps} title="Create Patient">  
 <Form {...formProps} layout="vertical">  
 {/* form fields go here */}  
 </Form>  
 </Modal>  
 );  
};

import { Modal, Form } from "@refinedev/antd";  

type CreatePatientProps = {  
 modalProps: ModalProps;  
 formProps: FormProps;  
};  

export const CreatePatient: React.FC<CreatePatientProps> = ({  
 modalProps,  
 formProps,  
}) => {  
 return (  
 <Modal {...modalProps} title="Create Patient">  
 <Form {...formProps} layout="vertical">  
 {/* form fields go here */}  
 </Form>  
 </Modal>  
 );  
};

This way, when you click the "Create Patient" button, the CreatePatient modal will be displayed on top of the PatientList component. Please note that the code provided above is a general example and may need to be adjusted to fit your specific use case. For more information, you can refer to the following sources: - Refine Docs: General Concepts > UI Integrations (https://refine.dev/docs/guides-concepts/general-concepts#ui-integrations-) - Refine Blog: Building an Customizable Invoice Generator App with Refine, Strapi & Ant Design (https://refine.dev/blog/refine-invoice-generator#refine-missions-create-page) - Refine Blog: Adding CRUD Actions and Authentication (https://refine.dev/blog/refine-pixels-3#refine--create-action) - Refine Blog: Building React admin panel with NextUI and Refine (https://refine.dev/blog/next-ui-react-admin-panel#products-create-page) - Refine Docs: Routing > Integrations > React Router v6 (https://refine.dev/docs/routing/integrations/react-router#usage-with-a-root-route) - Refine Blog: React Hook Form Validation with Complete Examples (https://refine.dev/blog/react-hook-form-validation-examples#project-setup) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

like-gold•7mo ago

@kapa.ai But my problem is that the Create is not being rendered when going to patient/create, checked by not seeing the console logging. I want to focus on the App.tsx the Routes part.

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on your App.tsx code, it seems like you're trying to render the PatientCreate component when navigating to the /patient/create route. However, you mentioned that you're not seeing the console log from the PatientCreate component, which suggests that the component might not be rendering as expected. One possible issue could be the way you're defining your routes. In your App.tsx, you're defining the PatientCreate route as a child of the PatientList route. This means that the PatientCreate component will only render when the URL is /patient/create. Here's how you can define your routes:

<Routes>
  <Route path="/patient" element={<PatientList/>}>
    <Route path="create" element={<PatientCreate/>} />
  </Route>
</Routes>

<Routes>
  <Route path="/patient" element={<PatientList/>}>
    <Route path="create" element={<PatientCreate/>} />
  </Route>
</Routes>

In this setup, the PatientCreate component will render when the URL is /patient/create, and the PatientList component will render when the URL is /patient. If you're still not seeing the console log from the PatientCreate component, there might be an issue with the way you're defining or importing the component. Make sure that the PatientCreate component is correctly exported and imported. Here's an example of how you can define the PatientCreate component:

export const PatientCreate: React.FC = () => {
  console.log("hello");
  return (
    <Create>
      <p>Some contents...</p>
    </Create>
  );
};

export const PatientCreate: React.FC = () => {
  console.log("hello");
  return (
    <Create>
      <p>Some contents...</p>
    </Create>
  );
};

And here's how you can import it in your App.tsx:

import { PatientCreate } from "./path/to/PatientCreate";

import { PatientCreate } from "./path/to/PatientCreate";

If you're still having issues, please provide more details about your setup or any error messages you're seeing. For more information, you can refer to the following sources: - Refine Blog: Building a CRUD app with Material UI and Strapi in React (https://refine.dev/blog/build-admin-panel-with-material-ui-and-strapi#creating-a-record) - Refine Blog: Building React admin panel with NextUI and Refine (https://refine.dev/blog/next-ui-react-admin-panel#products-create-page) - Refine Blog: How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel#how-to-create-a-record) - Refine Blog: Building a React Admin Panel with PrimeReact and Refine (https://refine.dev/blog/building-react-admin-panel-with-primereact-and-refine#create-page) - Refine Blog: Develop your Own Customizable Invoice Generator with Refine and Strapi (https://refine.dev/blog/refine-react-admin-invoice-generator#client-create-and-edit-page) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

like-gold•7mo ago

<Refine dataProvider={dataProvider(supabaseClient)} liveProvider={liveProvider(supabaseClient)} authProvider={authProvider} routerProvider={routerBindings} notificationProvider={useNotificationProvider} options={{ syncWithLocation: true, warnWhenUnsavedChanges: true, useNewQueryKeys: true, projectId: "xosAAU-v9RHzc-Ldz4wF", }} resources={[{ name: "patient", list: "/patient", create: "/patient/create", // edit: "/patient/edit/:id", // show: "/patient/show/:id" }]}> <Routes> <Route element={<ThemedLayoutV2 Header={ThemedHeaderV2} Sider={ThemedSiderV2} Title={ThemedTitleV2} > <Outlet /> </ThemedLayoutV2>}> {/* <Route path="/patient" element={<PatientList/>}> <Route path="create" element={<PatientCreate/>} /> </Route> */} <Route path="/patient" element={<PatientList />}> <Route path="create" element={<PatientCreate />} /> </Route> </Route> </Routes> <RefineKbar /> <UnsavedChangesNotifier /> <DocumentTitleHandler /> </Refine> export default App; export const PatientCreate: React.FC = () => { console.log("hello"); return ( <Create> <p>Some contents...</p> </Create> ); }; It's not showing the console.log @kapa.ai

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the code you provided, it seems like you're trying to render the PatientCreate component when navigating to the /patient/create route. However, you mentioned that you're not seeing the console log from the PatientCreate component, which suggests that the component might not be rendering as expected. One possible issue could be the way you're defining your routes. In your App.tsx, you're defining the PatientCreate route as a child of the PatientList route. This means that the PatientCreate component will only render when the URL is /patient/create. Here's how you can define your routes:

<Routes>
  <Route path="/patient" element={<PatientList/>}>
    <Route path="create" element={<PatientCreate/>} />
  </Route>
</Routes>

<Routes>
  <Route path="/patient" element={<PatientList/>}>
    <Route path="create" element={<PatientCreate/>} />
  </Route>
</Routes>

export const PatientCreate: React.FC = () => {
  console.log("hello");
  return (
    <Create>
      <p>Some contents...</p>
    </Create>
  );
};

export const PatientCreate: React.FC = () => {
  console.log("hello");
  return (
    <Create>
      <p>Some contents...</p>
    </Create>
  );
};

And here's how you can import it in your App.tsx:

import { PatientCreate } from "./path/to/PatientCreate";

import { PatientCreate } from "./path/to/PatientCreate";

If you're still having issues, please provide more details about your setup or any error messages you're seeing. For more information, you can refer to the following sources: - Refine Blog: Building a CRUD app with Material UI and Strapi in React (https://refine.dev/blog/build-admin-panel-with-material-ui-and-strapi#creating-a-record) - Refine Blog: Building React admin panel with NextUI and Refine (https://refine.dev/blog/next-ui-react-admin-panel#products-create-page) - Refine Blog: How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-hook-form-validation-examples#project-setup) - Refine Blog: Building a React Admin Panel with PrimeReact and Refine (https://refine.dev/blog/building-react-admin-panel-with-primereact-and-refine#create-page) - Refine Blog: Develop your Own Customizable Invoice Generator with Refine and Strapi (https://refine.dev/blog/refine-react-admin-invoice-generator#client-create-and-edit-page) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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