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•16mo 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•16mo ago

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

sunny-green•16mo 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.

stormy-gold•16mo 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

stormy-gold•16mo ago

stormy-gold•16mo 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)

sunny-green•16mo ago

Hmm. This could be for many reasons. if you share reproduced example with me, i will happy to debug

stormy-gold•16mo 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>
  );

sunny-green•16mo ago

probably <AddEmployee> component has issue