reactjs NextJS重定向在next.config.js文件中定义后不重定向url

pgx2nnw8  于 2023-03-12  发布在  React
关注(0)|答案(6)|浏览(256)

我试着在我的NextJS应用程序中定义重定向,但它不起作用。
下面是我在next.config.js文件中尝试的方法:

const withImages = require('next-images')
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");

module.exports = withPlugins(
    [
        [optimizedImages, {
            inlineImageLimit: 512
        }]
    ],
    {
        async redirects() {
            return [
                {
                    source: "/sales/guest/form",
                    destination: "/",
                    permanent: true
                }
            ]
        },
        env:{
            testEnvVar: 'vallll'
        }
    }
);

以下是如何操作的文档:https://nextjs.org/docs/api-reference/next.config.js/redirects

hgb9j2n6

hgb9j2n61#

为了使重定向和重写在NextJ中正常工作,您还需要确保另外一件事:
如果使用trailingSlash: true,则源路径必须以斜杠结尾。

{
    source: '/old/:id/',  // Notice the slash at the end
    destination: '/new/:id',
},

还需要考虑干扰路由的任何其他插件或配置。

e0bqpujr

e0bqpujr2#

你可以添加所有你的导入和const定义到第一个array参数,如下所示

const withPlugins = require('next-compose-plugins');
const css = require('@zeit/next-css');
const less = require('@zeit/next-less');

const nextConfig = {
  target: 'serverless',
  webpack(config, { isServer, webpack }) {
   // al your config
      
    return config;
  },
};

const redirects = {
  async redirects() {
    return [
      {
        source: '/old/blogs/:slug*',
        destination: 'whatever your new rewrite url',
        permanent: true,
      },
    ];
  },
};
module.exports = withPlugins(
  [
    [css],
    [less],
    [redirects], // you can directly drop your redirect rules here 
  ],
  nextConfig
);
jckbn6z7

jckbn6z73#

您使用的是什么NextJS版本?9.5以上支持重定向

ehxuflar

ehxuflar4#

对于遇到此问题的任何人,请尝试重新启动服务器。配置文件将重新加载。

bsxbgnwa

bsxbgnwa5#

在我的例子中,我尝试重定向到外部链接,我有trailingSlash: true,我用斜杠结束我的源代码路径。
它不起作用,因为我使用了next/link中的Link组件
我把它改为普通的a标签,它工作了。
之前:

<Link href="/some-path" passHref>
  <a>
   to external
  </a>
</Link>

之后:

{/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
<a href="/some-path">
  to external
</a>

您需要禁用eslint规则@next/next/no-html-link-for-pages,以便在构建时不会引发错误
在next.config.js文件中:

module.exports = {
  trailingSlash: true,
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/some-path",
        destination: "https://example.com",
        permanent: true,
      },
    ]
  },
}
6psbrbz9

6psbrbz96#

对于任何正在与此问题作斗争的人,这里有一个解决方案

提问者在next.config.js中所做的是正确的,它在documentation中声明,因为您将需要重定向密钥来允许传入的流量传递到其他目的地。
因此,其源路径的传入流量为source: "/sales/guest/form"
并且可能使用if条件if met来重定向到主页,因为他们在next.config.jsdestination: "/"中有它
要完成此操作,您必须转到pages目录中的Form页面,并从Form页面处理此重定向
并导入如下重定向
基本上,在FORM file内页中,假设目录路径为:
/销售/客人/表格

import { redirect } from 'next/navigation';

const Form = () => {

// prehaps have a condition to tell it when to redirect so:

    // this condition is met whatever
    if (1 === 1) {
        redirect("/");
    }

    // .. rest of the code

}

export default Form;

相关问题