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.
</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
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:
In the CreatePatient
component, you can use the modalProps
and formProps
to control the modal and form:
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:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below
helpful-purple•6mo 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.
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:
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:
And here's how you can import it in your App.tsx
:
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:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below
helpful-purple•6mo 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
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:
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:
And here's how you can import it in your App.tsx
:
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:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below