Immediate redirect from parent to child

[jmaldon1]

So if I have a parent route such as /dashboard and a child route that is /dashboard/plans. I would like it if the user were to enter the /dashboard route into their URL, that it will immediately redirect them to one of its child routes, in this case /dashboard/plans.

The issue is that if you immediately redirect in the /dashboard loader, you will end up in an infinite redirect loop:

// dashboard.tsx
import type { LoaderFunction } from "@remix-run/node";
import { Outlet } from "@remix-run/react";
import { redirect } from "@remix-run/node";

import Box from "@mui/material/Box";

export const loader: LoaderFunction = async () => {
  // This causes an infinite redirect loop
  return redirect(`/dashboard/plans`);
};

export default function Dashboard() {
  return (
    <>
      <Box>
        <h1>Dashboard</h1>
        <Outlet />
      </Box>
    </>
  );
}

What is the appropriate solution for this?

[kiliman]

The issue is that when you navigate to a nested route like dashboard/plans, Remix is calling the parent loader dashboard in addition to the dashboard/plans loader. Since the parent is returning redirect, it gets caught in a loop. Perhaps Remix should detect this, but for now, here's a workaround:

// dashboard.tsx
export const loader: LoaderFunction = async ({ request }) => {
  const url = new URL(request.url);
  if (url.pathname === "/dashboard") {
    return redirect("/dashboard/plans");
  }
  return null;
};

Here, we're only redirecting if the current URL is /dashboard. When Remix calls loaders, it uses the current route and identifies the route id with ?data=route-id

So initial request is:
/dashboard?_data=routes/dashboard

Then after redirect, you get:
/dashboard/plans?_data=routes/dashboard
/dashboard/plans?_data=routes/dashboard/plans

So by checking the URL pathname, you'll only redirect on the initial request.

EDIT: Make sure to checkout the comments below. It's preferable to redirect from an index route instead of a layout route.

[sergiodxa]

Another way to solve that would be to create a dashboard/index route and put the redirect there, the index route will only be used when the user is on /dashboard but not in /dashboard/plans making it safer.

[jmaldon1]

Both of these work! Thanks for the replies. I think @sergiodxa answer might be a slightly cleaner approach for me:

// dashboard/index.tsx
import type { LoaderFunction } from "@remix-run/node";
import { redirect } from "@remix-run/node";


export const loader: LoaderFunction = async () => {
  return redirect(`/dashboard/plans`);
};

Thanks guys!

[kiliman]

I agree. If you can change your routes to include an index route, then that is the safest place to redirect from.

[caprica]

I have a situation similar to this, for example using these directories in the v2 structure:

app/routes/user
app/routes/user/one
app/routes/user/two

In the loader method in the parent route "/user", I load the user record from the database since the same data is used on all child routes, and the UI layout is also the same.

In the child routes "/user/one" and "/user/two" I pull the already loaded common user data data from the Outlet context, and render the page-specific UI into the parent layout. Each child route just picks out a subset of the user data and displays that, and I don't have to duplicate the loader on every child page.

This is fine, it all works.

But I do not want to let the user land on the "app/routes/user" parent route since there's nothing there, I would prefer it loads the common data once and then redirects to "app/routes/user/one".

So now I need to load data and prevent them landing on these parent routes, how can I do this?

Or am I thinking about this the wrong way?