使 NextJS <Link> 尊重默认的“重定向”中间件答案

【问题标题】：Make NextJS <Link> respect the default "Redirects" middleware使 NextJS <Link> 尊重默认的“重定向”中间件
【发布时间】：2022-06-12 21:36:17
【问题描述】：

我正在使用 React 和 NextJS 版本 12，并希望重定向这两个 URL：

http://localhost:3000
http://localhost:3000/

两者都应该去

http://localhost:3000/dashboard

我设置了以下Redirects middleware：

async redirects() {
  return [
    {
      source: '/',
      destination: '/dashboard',
      permanent: false,
    },
  ];
},

如果我在地址栏中键入上面的任一 URL，这将有效。但是，这不起作用：

<Link href="/">dashboard</Link>

这会将我发送到位于 URL http://localhost:3000 的根目录下的 index.tsx（一个备用页面，以防万一我们需要它）。它应该重定向到http://localhost/dashboard。

也许我对在服务器上与在客户端上运行什么感到困惑？我来自 Angular，其中路由和重定向是针对客户端的（或者两者都针对，我相信使用 SSR 时）。

如何让Link 尊重 NextJS 内置的 Redirects 中间件？还是我唯一的选择是编写自定义中间件？

【问题讨论】：

redirects 仅适用于向服务器发出的请求。 next/link 导航发生在客户端，因此不受redirects 的影响。如果您需要路由到/dashboard 路由，为什么不直接链接到它，即<Link href="/dashboard">dashboard</Link>。
啊，这说明了事情。遗憾的是，我曾期望中间件同时支持客户端和服务器端。那将不得不寻找另一种解决方案。
好问题为什么不更改hrefs，我不希望这样，因为当您转到/ 时，我在许多地方复制了我的应用程序的“默认”页面.如果可以的话，我不想将这种担忧散布到我的页面和组件中。
您可以定义一个在整个应用程序中使用的defaultRoute 变量，并在一个地方对其进行修改。您甚至可以在 redirects 中重复使用它以保持一致。
干杯，这听起来像是一个合适的解决方法/解决方案。

标签： reactjs next.js routes nextjs-redirects

【解决方案1】：

一种解决方案是在您的index.tsx 上添加一个UseEffect：

import React, { useEffect } from "react";
import Router from "next/router";

const Home = (props: any) => {
  useEffect(() => {
    const { pathname } = Router;
    if (pathname === "/") {
      Router.push("/dashboard");
    }
  });
  return <></>;
};

export default Home;

【讨论】：