rubber-blueR
Refine•3y ago•
13 replies
rubber-blue

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 />,
  },
},

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>
  );
};

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