404 Error Create Page

So I created a new route for my organizations for the create resource:

{
  name: "organizations",
  list: "/organizations",
  create: "/organizations/create",
  meta: {
    label: "Organizations",
    icon: <CorporateFareIcon />,
  },
},

{
  name: "organizations",
  list: "/organizations",
  create: "/organizations/create",
  meta: {
    label: "Organizations",
    icon: <CorporateFareIcon />,
  },
},

And I created a create.tsx file under my pages/organization folder, so it's at pages/organizations/create.tsx and this is the code for it:

import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { Create } from "@refinedev/mui";
import InputMask from "react-input-mask";

import FormControl from "@mui/material/FormControl";
import FormControlLabel from "@mui/material/FormControlLabel";
import Avatar from "@mui/material/Avatar";
import FormLabel from "@mui/material/FormLabel";
import Grid from "@mui/material/Grid";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import FormHelperText from "@mui/material/FormHelperText";
import type { TextFieldProps } from "@mui/material/TextField";

import { IOrganization } from "../../interfaces";

export const OrganizationCreate: React.FC<IResourceComponentsProps> = () => {
  const t = useTranslate();
  const {
    register,
    control,
    formState: { errors },
    saveButtonProps,
  } = useForm<IOrganization, HttpError, IOrganization>();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <form>
        <Grid
          container
          marginTop="8px"
          sx={{
            marginX: { xs: "0px" },
            paddingX: { xs: 1, md: 4 },
          }}
        >
          <Grid mb={1} item xs={12} md={4}>
            <Stack gap={1} justifyContent="center" alignItems="center">
             
              <Typography fontWeight="bold" variant="body2">
                {t("stores.selectLocation")}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap="24px">
              <FormControl>
                <FormLabel
                  required
                  sx={{
                    marginBottom: "8px",
                    fontWeight: "700",
                    fontSize: "14px",
                    color: "text.primary",
                  }}
                >
                  {t("organization.fields.name")}
                </FormLabel>
                <TextField
                  {...register("name", {
                    required: t("errors.required.field", {
                      field: "Name",
                    }),
                  })}
                  size="small"
                  margin="none"
                  variant="outlined"
                />
                {errors.name && <FormHelperText error>{errors.name.message}</FormHelperText>}
              </FormControl>
              <FormControl>
                <FormLabel
                  required
                  sx={{
                    marginBottom: "8px",
                    fontWeight: "700",
                    fontSize: "14px",
                    color: "text.primary",
                  }}
                >
                  {t("organization.fields.description")}
                </FormLabel>
                <TextField {...register("desc", {})} size="small" margin="none" variant="outlined" />
              </FormControl>
            </Stack>
          </Grid>
        </Grid>
      </form>
    </Create>
  );
};

import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { Create } from "@refinedev/mui";
import InputMask from "react-input-mask";

import FormControl from "@mui/material/FormControl";
import FormControlLabel from "@mui/material/FormControlLabel";
import Avatar from "@mui/material/Avatar";
import FormLabel from "@mui/material/FormLabel";
import Grid from "@mui/material/Grid";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import FormHelperText from "@mui/material/FormHelperText";
import type { TextFieldProps } from "@mui/material/TextField";

import { IOrganization } from "../../interfaces";

export const OrganizationCreate: React.FC<IResourceComponentsProps> = () => {
  const t = useTranslate();
  const {
    register,
    control,
    formState: { errors },
    saveButtonProps,
  } = useForm<IOrganization, HttpError, IOrganization>();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <form>
        <Grid
          container
          marginTop="8px"
          sx={{
            marginX: { xs: "0px" },
            paddingX: { xs: 1, md: 4 },
          }}
        >
          <Grid mb={1} item xs={12} md={4}>
            <Stack gap={1} justifyContent="center" alignItems="center">
             
              <Typography fontWeight="bold" variant="body2">
                {t("stores.selectLocation")}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap="24px">
              <FormControl>
                <FormLabel
                  required
                  sx={{
                    marginBottom: "8px",
                    fontWeight: "700",
                    fontSize: "14px",
                    color: "text.primary",
                  }}
                >
                  {t("organization.fields.name")}
                </FormLabel>
                <TextField
                  {...register("name", {
                    required: t("errors.required.field", {
                      field: "Name",
                    }),
                  })}
                  size="small"
                  margin="none"
                  variant="outlined"
                />
                {errors.name && <FormHelperText error>{errors.name.message}</FormHelperText>}
              </FormControl>
              <FormControl>
                <FormLabel
                  required
                  sx={{
                    marginBottom: "8px",
                    fontWeight: "700",
                    fontSize: "14px",
                    color: "text.primary",
                  }}
                >
                  {t("organization.fields.description")}
                </FormLabel>
                <TextField {...register("desc", {})} size="small" margin="none" variant="outlined" />
              </FormControl>
            </Stack>
          </Grid>
        </Grid>
      </form>
    </Create>
  );
};

But when i navigate to my organizations/create in my URL, I get a 404 error. But my organization list works just fine.

7 Replies

kapa.ai•12mo ago

Hi @nick_montoya. 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 have not defined the create action for your organizations resource in your resources array. In the resources array, you need to specify the create action and its corresponding route. Here's how you can do it:

{
  name: "organizations",
  list: "/organizations",
  create: "/organizations/create", // Add this line
  meta: {
    label: "Organizations",
    icon: <CorporateFareIcon />,
  },
},

{
  name: "organizations",
  list: "/organizations",
  create: "/organizations/create", // Add this line
  meta: {
    label: "Organizations",
    icon: <CorporateFareIcon />,
  },
},

This tells Refine to use the create action for the route /organizations/create. Without this, Refine won't know where to find the create page for organizations, hence the 404 error. Please make sure that your App.tsx file is correctly set up to use the Refine component with the dataProvider, routerProvider, and resources props. Here's an example of how it should look:

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  

function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 routerProvider={routerProvider}  
 resources={[  
 {  
 name: "organizations",  
 list: "/organizations",  
 create: "/organizations/create",  
 },  
 // other resources...
 ]}  
 >  
 {/* other components... */}
 </Refine>  
 );  
}

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  

function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 routerProvider={routerProvider}  
 resources={[  
 {  
 name: "organizations",  
 list: "/organizations",  
 create: "/organizations/create",  
 },  
 // other resources...
 ]}  
 >  
 {/* other components... */}
 </Refine>  
 );  
}

Please refer to the Refine documentation (https://refine.dev/docs) for more details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

conscious-sapphire•12mo ago

@kapa.ai Sorry I did place that I just also had edit and show so i removed them to save characters but also accidentally remove the create, so even with the create action, it's still showing a 404 error

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I see, if you have already defined the create action in your resources array and you're still getting a 404 error, it might be due to how your routing is set up. In Refine, when components are used to define the resource actions, default paths will be used. You can override the default paths by assigning an object with component and path properties to the action properties. The default paths are: - list: /resources - create: /resources/create - edit: /resources/edit/:id - show: /resources/show/:id If you're using a custom router like Next.js or Remix, you might need to set up a catch-all route to handle undefined routes. Here's an example for Next.js:

import { RefineRoutes } from "@refinedev/nextjs-router/app";  

export default function CatchAll() {  
 return (  
 <RefineRoutes>  
 {(matchingRoute) => {  
 if (matchingRoute) {  
 return { matchingRoute };  
 }  
  
 return <ErrorPage />;  
 }}  
 </RefineRoutes>  
 );  
}

import { RefineRoutes } from "@refinedev/nextjs-router/app";  

export default function CatchAll() {  
 return (  
 <RefineRoutes>  
 {(matchingRoute) => {  
 if (matchingRoute) {  
 return { matchingRoute };  
 }  
  
 return <ErrorPage />;  
 }}  
 </RefineRoutes>  
 );  
}

And here's an example for Remix:

import { RefineRoutes } from "@refinedev/remix-router";  

export default function CatchAll() {  
 return (  
 <RefineRoutes>  
 {(matchingRoute) => {  
 if (matchingRoute) {  
 return { matchingRoute };  
 }  
  
 return <ErrorPage />;  
 }}  
 </RefineRoutes>  
 );  
}

import { RefineRoutes } from "@refinedev/remix-router";  

export default function CatchAll() {  
 return (  
 <RefineRoutes>  
 {(matchingRoute) => {  
 if (matchingRoute) {  
 return { matchingRoute };  
 }  
  
 return <ErrorPage />;  
 }}  
 </RefineRoutes>  
 );  
}

If you're using React Router v6, you can define your actions (list, create, edit, show, clone) as paths instead of components. This will allow you to define custom routes for actions and take advantage of the full potential of your router without being restricted to the routes created automatically. If none of these solutions work, it might be a good idea to check your console for any error messages or warnings that could give you more information about what's going wrong. For more information, please refer to the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

wee-brown•12mo ago

Did you put the routes in the app file? For example, with blog-posts of the example you have this in the Refine component

<Refine
                    routerProvider={routerBindings}
                    dataProvider={dataProvider(
                        "https://api.fake-rest.refine.dev",
                    )}
                    notificationProvider={notificationProvider}
                    resources={[
                        {
                            name: "blog_posts",
                            list: "/blog-posts",
                            show: "/blog-posts/show/:id",
                            create: "/blog-posts/create",
                            edit: "/blog-posts/edit/:id",
                        },
                    ]}
                    options={{
                        syncWithLocation: true,
                        warnWhenUnsavedChanges: true,
                    }}
                >

<Refine
                    routerProvider={routerBindings}
                    dataProvider={dataProvider(
                        "https://api.fake-rest.refine.dev",
                    )}
                    notificationProvider={notificationProvider}
                    resources={[
                        {
                            name: "blog_posts",
                            list: "/blog-posts",
                            show: "/blog-posts/show/:id",
                            create: "/blog-posts/create",
                            edit: "/blog-posts/edit/:id",
                        },
                    ]}
                    options={{
                        syncWithLocation: true,
                        warnWhenUnsavedChanges: true,
                    }}
                >

And then in the routes, you define the routes of every page

<Routes>
                        <Route
                            element={
                                <ThemedLayoutV2>
                                    <Outlet />
                                </ThemedLayoutV2>
                            }
                        >
                            <Route index element={<NavigateToResource resource="blog_posts" />} />
                            <Route path="blog-posts">
                                <Route index element={<AntdInferencer />} />
                                <Route
                                    path="show/:id"
                                    element={<AntdInferencer />}
                                />
                                <Route
                                    path="edit/:id"
                                    element={<AntdInferencer />}
                                />
                                <Route
                                    path="create"
                                    element={<AntdInferencer />}
                                />
                            </Route>
                            <Route path="*" element={<ErrorComponent />} />
                        </Route>
                    </Routes>

<Routes>
                        <Route
                            element={
                                <ThemedLayoutV2>
                                    <Outlet />
                                </ThemedLayoutV2>
                            }
                        >
                            <Route index element={<NavigateToResource resource="blog_posts" />} />
                            <Route path="blog-posts">
                                <Route index element={<AntdInferencer />} />
                                <Route
                                    path="show/:id"
                                    element={<AntdInferencer />}
                                />
                                <Route
                                    path="edit/:id"
                                    element={<AntdInferencer />}
                                />
                                <Route
                                    path="create"
                                    element={<AntdInferencer />}
                                />
                            </Route>
                            <Route path="*" element={<ErrorComponent />} />
                        </Route>
                    </Routes>

conscious-sapphire•12mo ago

Yes I fixed, i forgot to add that line lol, idk why I was stuck thinking it was going to find it automatically like nextjs