页面加载时重新混合重定向

Question

在 remix 中重定向页面加载的最佳方式是什么？我下面的代码是不是很糟糕或者没有必要调用？

我网站上的基本路线始终以

/orderId

开头。我有一个标有“产品”的导航菜单。在该“产品”页面上，还有另一个菜单导航栏，其中包含

/orderId/products/local

和

/orderId/products/global

。当我导航到“产品”页面时，我希望立即重定向到

/orderId/products/local

。

import { type LoaderFunctionArgs, redirect } from "@remix-run/node";
import { Outlet, useLocation } from "@remix-run/react";
import OrderLink from "~/components/order-link";
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";

export const loader = async ({ request, params }: LoaderFunctionArgs) => {
    const orderId = params["order-id"];
    const url = new URL(request.url);
    const pathname = url.pathname;

    if (pathname === `/${orderId}/products` || pathname === `/${orderId}`) {
        return redirect(`/${orderId}/products/local`);
    }

    return null;
};

export default function Products() {
    const location = useLocation();
    const tabValue = location.pathname.includes("/local") ? "local" : "global";

    return (
        <div>
            <div className="flex items-center justify-between w-full mb-10">
                <span className="text-xl font-semibold">Products</span>
            </div>
            <Tabs value={tabValue}>
                <TabsList className="rounded-lg w-fit">
                    <TabsTrigger asChild value="global">
                        <OrderLink to="/products/global">Global</OrderLink>
                    </TabsTrigger>
                    <TabsTrigger asChild value="local">
                        <OrderLink to="/products/local">Local</OrderLink>
                    </TabsTrigger>
                </TabsList>
                <Outlet />
            </Tabs>
        </div>
    );
}

Answer 1

您应该创建一个处理重定向的索引路由。

所以对于

/:order-id/products

=>

/:order-id/products/local

// routes/$order-id.products._index.tsx
export function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url)
  return redirect(`${url.pathname}/local`)
}
export default function() {
  return null
}

对于

/:order-id

=>

/:order-id/products/local

// routes/$order-id._index.tsx
export function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url)
  return redirect(`${url.pathname}/products/local`)
}
export default function() {
  return null
}