deep-jade
deep-jade12mo ago

After adding a parent to my menuItem in the sidebar the create: AddEmployee is giving 404 error

I have an element called My Business which is a parent element in the sidebar and I have under it Employees and Roles.
{
name: "business",
key: "business",
icon: <ArchitectureOutlined
color="action"
/>,
meta: {
label: "My Business",
},
},

{
name: "employees",
list: EmployeeList,
create: AddEmployee,
icon: <PeopleIcon />,
meta: {
parent: "business",
},
},
//Roles
{
name: "roles",
list: ManageRoles,
icon: <StarOutlineIcon />,
meta: {
parent: "business",
},
},
{
name: "business",
key: "business",
icon: <ArchitectureOutlined
color="action"
/>,
meta: {
label: "My Business",
},
},

{
name: "employees",
list: EmployeeList,
create: AddEmployee,
icon: <PeopleIcon />,
meta: {
parent: "business",
},
},
//Roles
{
name: "roles",
list: ManageRoles,
icon: <StarOutlineIcon />,
meta: {
parent: "business",
},
},
However the AddEmployee showing 404 if its have parent element
9 Replies
kapa.ai
kapa.ai12mo ago
Hi @acidias. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To fix the 404 issue when adding a parent element, you need to update your route configuration in the <Refine> component. Make sure you have the correct route paths for your resources and their corresponding elements. Here's an example of how you can set up your routes based on the information you provided:
import { Refine } from "@refinedev/core";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { Layout } from "components/layout";

const App: React.FC = () => {
return (
<BrowserRouter>
<Refine
resources={[
{
name: "business",
key: "business",
icon: <ArchitectureOutlined color="action" />,
meta: {
label: "My Business",
},
},
{
name: "employees",
list: "/business/employees",
create: "/business/employees/create",
icon: <PeopleIcon />,
meta: {
parent: "business",
},
},
{
name: "roles",
list: "/business/roles",
icon: <StarOutlineIcon />,
meta: {
parent: "business",
},
},
]}
>
<Routes>
<Route
element={
<Layout>
<Outlet />
</Layout>
}
>
<Route index element={<NavigateToResource />} />
<Route path="/business/employees" element={<EmployeeList />} />
<Route path="/business/employees/create" element={<AddEmployee />} />
<Route path="/business/roles" element={<ManageRoles />} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
);
};

export default App;
import { Refine } from "@refinedev/core";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { Layout } from "components/layout";

const App: React.FC = () => {
return (
<BrowserRouter>
<Refine
resources={[
{
name: "business",
key: "business",
icon: <ArchitectureOutlined color="action" />,
meta: {
label: "My Business",
},
},
{
name: "employees",
list: "/business/employees",
create: "/business/employees/create",
icon: <PeopleIcon />,
meta: {
parent: "business",
},
},
{
name: "roles",
list: "/business/roles",
icon: <StarOutlineIcon />,
meta: {
parent: "business",
},
},
]}
>
<Routes>
<Route
element={
<Layout>
<Outlet />
</Layout>
}
>
<Route index element={<NavigateToResource />} />
<Route path="/business/employees" element={<EmployeeList />} />
<Route path="/business/employees/create" element={<AddEmployee />} />
<Route path="/business/roles" element={<ManageRoles />} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
);
};

export default App;
Make sure to replace EmployeeList, AddEmployee, and ManageRoles with your actual components. This configuration should resolve the 404 issue when navigating to the AddEmployee page. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai12mo ago
<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire
rare-sapphire12mo ago
Hi @acidias ,create should be path, bot's example code is right. https://refine.dev/docs/tutorial/understanding-resources/index/#defining-actions-for-a-resource
Resources | refine
In Unit 2.4, we defined a resource to create our CRUD pages with the Inferencer component but did not explain how it works. We will take care of that in this unit and thoroughly explain the resources prop of the `` component using mock components.
deep-jade
deep-jade12mo ago
Thank, I manage to fix this but now its seems there is an extra side. the 404 error and under it is's showing the AddEmployee
deep-jade
deep-jade12mo ago
No description
deep-jade
deep-jade12mo ago
So I can scroll down and see it fully, but what is the 404 error? Also the rest pages work as same (I need to scroll down for the module)
rare-sapphire
rare-sapphire12mo ago
Hmm. This could be for many reasons. if you share reproduced example with me, i will happy to debug
deep-jade
deep-jade12mo ago
@alicanerdurmaz This is the return:
return (
<ColorModeContextProvider>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
<RefineSnackbarProvider>
<Refine
//Change for: https://brexons-prototype.onrender.com/api/v1
// dataProvider={dataProvider("http://localhost:3000/api/v1")}
dataProvider={dataProvider("https://brexons-prototype.onrender.com/api/v1")}
notificationProvider={notificationProvider}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
resources={[
{
name: "business",
key: "business",
icon: <ArchitectureOutlined
color="action"
/>,
meta: {
label: "My Business",
},
},

{
name: "employees",
list: "/business/employees",
create: "/business/employees/create",
icon: <PeopleIcon />,
meta: {
parent: "business",
},
},
{
name: "roles",
list: "/business/roles",
icon: <StarOutlineIcon />,
meta: {
parent: "business",
},
},
{
name: "building-plans",
list: BuildingPlan,
show: BuildingsDetail,
create: CreateBuildingPlan,
edit: EditBuildingPlan,
icon: <ArticleOutlined />,
},
{
name: "contracts",
list: AllContracts,
icon: <AddHomeWorkOutlinedIcon />,
},
{
name: "my-profile",
icon: <AccountCircleOutlined />,
meta: {
label: "My Profile",
},
list: MyProfile,
},
]}
...
return (
<ColorModeContextProvider>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
<RefineSnackbarProvider>
<Refine
//Change for: https://brexons-prototype.onrender.com/api/v1
// dataProvider={dataProvider("http://localhost:3000/api/v1")}
dataProvider={dataProvider("https://brexons-prototype.onrender.com/api/v1")}
notificationProvider={notificationProvider}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
resources={[
{
name: "business",
key: "business",
icon: <ArchitectureOutlined
color="action"
/>,
meta: {
label: "My Business",
},
},

{
name: "employees",
list: "/business/employees",
create: "/business/employees/create",
icon: <PeopleIcon />,
meta: {
parent: "business",
},
},
{
name: "roles",
list: "/business/roles",
icon: <StarOutlineIcon />,
meta: {
parent: "business",
},
},
{
name: "building-plans",
list: BuildingPlan,
show: BuildingsDetail,
create: CreateBuildingPlan,
edit: EditBuildingPlan,
icon: <ArticleOutlined />,
},
{
name: "contracts",
list: AllContracts,
icon: <AddHomeWorkOutlinedIcon />,
},
{
name: "my-profile",
icon: <AccountCircleOutlined />,
meta: {
label: "My Profile",
},
list: MyProfile,
},
]}
...
This is the return:
Title={Title}
Sider={Sider}
Layout={Layout}
Header={Header}
legacyRouterProvider={routerProvider}
legacyAuthProvider={authProvider}
LoginPage={Login}
DashboardPage={BusinessDetails}
>
<Routes>
<Route
element={
<Layout>
<Outlet />
</Layout>
}
>
<Route path="/business/employees" element={<EmployeeList />} />
<Route path="/employees/create" element={<AddEmployee />} />
<Route path="/business/roles" element={<ManageRoles />} />
</Route>
</Routes>
</Refine>
</RefineSnackbarProvider>
</ColorModeContextProvider>
);
Title={Title}
Sider={Sider}
Layout={Layout}
Header={Header}
legacyRouterProvider={routerProvider}
legacyAuthProvider={authProvider}
LoginPage={Login}
DashboardPage={BusinessDetails}
>
<Routes>
<Route
element={
<Layout>
<Outlet />
</Layout>
}
>
<Route path="/business/employees" element={<EmployeeList />} />
<Route path="/employees/create" element={<AddEmployee />} />
<Route path="/business/roles" element={<ManageRoles />} />
</Route>
</Routes>
</Refine>
</RefineSnackbarProvider>
</ColorModeContextProvider>
);
rare-sapphire
rare-sapphire12mo ago
probably <AddEmployee> component has issue