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.
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.
