Parallel Routes

[Amine-AD]

Hello everyone i am trying to handle Parallel Routes btw i am using remix-flat-routes, any suggestion how to do it like next js, basically i have a dashboard page that contains some components and i want each component to handle its loader and error boundary

[sergiodxa]

There's no parallel routes in Remix like in Next.js, you will have to make your dashboard route loader fetch the data every component inside needs, or change your UI to only show one part at the time based on the URL then every component inside can be a nested route, but you won't be able to show them all at the same time.

[Amine-AD]

thank you i appreciate, i am coming from Next js and still new to Remix js, so it will take me sometime to understand the Remix workflow, i just have one question if you don't mind, can i use loader function with components?

[sergiodxa]

No, loaders are route features, not component features.

[Amine-AD]

thank you, actually i am facing another issue, this time is about modal form, so basically i have a modal form for example when i click on add user that modal will popup and i want to submit the form using clientAction which suppose to handle validation but it doesn't work for me let me share the code.

Correct me if i am wrong the clientAction also won't work here because it is routes feature, right?
if yes, then should i use the normal way to submit the form and maybe can use react hook form to handle the validation?

import { z } from "zod";
import { Button } from "~/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog";
import { Input } from "~/components/ui/input";
import { User } from "../data/schema";
import { ClientActionFunctionArgs, Form, json, useActionData, useFetcher, useNavigation, useSubmit } from "@remix-run/react";
import { Label } from "~/components/ui/label";

const formSchema = z.object({
    username: z.string().min(1, { message: "Username is required." }),
    email: z
      .string()
      .min(1, { message: "Email is required.'"})
      .email({ message: "Email is invalid." }),
    isEdit: z.boolean(),
});

interface Props {
  currentRow?: User
  open: boolean
  onOpenChange: (open: boolean) => void
}

export const clientAction = async ({ request, params }: ClientActionFunctionArgs) => {
  // const formData = await request.formData();
  
  // must validate the form here
}

export function UsersFormDialog({ currentRow, open, onOpenChange }: Props) {
  const isEdit = !!currentRow
  const actionData = useActionData<typeof clientAction>();

  const fetcher = useFetcher();

  console.log("actionData ------------> ", actionData);

  return (
    <Dialog
      open={open}
      onOpenChange={(state) => {
        onOpenChange(state)
      }}
    >
      <DialogContent className="sm:max-w-lg">
        <DialogHeader className="text-left">
          <DialogTitle>{isEdit ? "Edit User" : "Add New User"}</DialogTitle>
          <DialogDescription>
            {isEdit ? "Update the user here. " : "Create new user here. "}
            Click save when you&apos;re done.
          </DialogDescription>
        </DialogHeader>
        <Form
          id="user-form"
          onSubmit={(event) => {
            fetcher.submit(event.currentTarget)
          }}
          className="space-y-6"
        >
          <div className="grid w-full items-center gap-2">
            <Label htmlFor="username">
              Username
            </Label>
            <Input
              placeholder="John"
              autoComplete="off"
              name="username"
              id="username"
            />
          </div>
          <div className="grid w-full items-center gap-2">
            <Label htmlFor="email">
              Email
            </Label>
              <Input
                placeholder="[email protected]"
                name="email"
                id="email"
              />
          </div>
        </Form>
        <DialogFooter>
          <Button variant="outline">Cancel</Button>
          <Button type="submit" form="user-form">
            Save
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

[akomm]

In my experience from nextjs, parallel routes sound nice, but were overcomplicating things at the end. As some mentioned remix does not have those. But its quite easy to achieve the desired effect by simply creating two routes and some reusable logic to fetch and render used in both. The nextjs way has so many pitfalls and needed "filler" files in order for it to work in all cases.

[estenp]

There's no parallel routes in Remix like in Next.js, you will have to make your dashboard route loader fetch the data every component inside needs, or change your UI to only show one part at the time based on the URL then every component inside can be a nested route, but you won't be able to show them all at the same time.

#5431 (reply in thread)

@sergiodxa This whole discussion included many comments that seemed to indicate once Remix/RR got RSC support, this problem is sort of solved. So.. is that not the case?

Further, what are the advantages of RSC support in RR7?

[sergiodxa]

Im not sure how RSC can solve that, maybe you mean that you can render multiple server component and let each one fetch its data? If that's the case while more convenient it's possible right now to fetch in parallel all the data of each "parallel" part of a route

export function loader(args: Route.LoaderArgs) {
  let data1 = getData1()
  let data2 = getData2()
  let data3 = getData3()

  return data({ data1, data2, data3 })
}

Then you can render each data# inside your route UI with a different component, the only difference with server components would be that instead of returning just the data from the loader you will return the UI too.