重定向从/到另一个页面

我已经在我的 Next.JS应用程序中实现了这个功能，通过定义一个根页面来重定向服务器端和客户端。下面是根页面的代码:

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


const redirectTo = "/hello-nextjs";


const RootPage = () => {
useEffect(() => Router.push(redirectTo));
return null;
};
RootPage.getInitialProps = (ctx) => {
if (ctx.req) {
ctx.res.writeHead(302, { Location: redirectTo });
ctx.res.end();
}
};


export default RootPage;

下面是2个复制粘贴级别的示例: 一个用于浏览器，一个用于服务器。

Https://dev.to/justincy/client-side-and-server-side-redirection-in-next-js-3ile

假设您希望从 root (/)重定向到一个名为 home: (/home)的页面

在主索引文件中，粘贴以下内容:

客户端

import { useRouter } from 'next/router'


function RedirectPage() {
const router = useRouter()
// Make sure we're in the browser
if (typeof window !== 'undefined') {
router.push('/home')
}
}


export default RedirectPage

服务器端

import { useRouter } from 'next/router'


function RedirectPage({ ctx }) {
const router = useRouter()
// Make sure we're in the browser
if (typeof window !== 'undefined') {
router.push('/home');
return;
}
}


RedirectPage.getInitialProps = ctx => {
// We check for ctx.res to make sure we're on the server.
if (ctx.res) {
ctx.res.writeHead(302, { Location: '/home' });
ctx.res.end();
}
return { };
}


export default RedirectPage

如果你的意图是确保你的应用像 SPA 一样运行，并且想拦截一个传入的无效(或有效)路径名，用户把它粘贴到地址栏，那么这里有一个快速/黑客的方法来做到这一点。

假设你的路径是,

enum ERoutes {
HOME = '/',
ABOUT = '/about',
CONTACT = '/contact'
}

添加一个自定义的 _error页面，如果你还没有一个，并添加到它:

import React from 'react';
import { NextPage } from 'next';
import { useDispatch } from 'react-redux';
import { useRouter } from 'next/router';


const Error: NextPage = () => {
const { asPath, push } = useRouter();
const dispatch = useDispatch();


React.useEffect(() => {
const routeValid = Object.values(ERoutes).includes(asPath);


if (routeValid) {
// do some stuff, such as assigning redux state to then render SPA content in your index page
} else {
// you can either continue to render this _error component, or redirect to your index page,
// where you may have your own error component that is displayed based on your app state.
// In my case, I always redirect to '/' (as you can see below, where I push('/'), but before doing so,
// I dispatch relevant redux actions based on the situation
}


// I redirect to root always, but you can redirect only if routeValid === true
push('/');
}, []);


return (
<div>Error because '{asPath}' does not exist</div>
);
};


export default Error;

适用于 NextJS 9.5.0+

1. 创建 next.config.js文件
2. 添加源和目标 URL (如果是外部域，可以设置为永久重定向)

module.exports = {
async redirects() {
return [
{
source: '/team',
destination: '/about',
permanent: false,
},
{
source: "/blog",
destination:
"https://blog.dundermifflin.com",
permanent: true,
},
];
},
};

Https://github.com/vercel/next.js/tree/canary/examples/redirects

Js 10 + 为我们提供了一些额外的、优雅的解决方案来进行重定向。

1. SERVER-SIDE -您应该使用 getServerSideProps

   下面的例子假设我们有一些额外的会话要检查(但可以是 如果会话是空的，我们在服务器端 (context.res) ，这意味着用户没有登录，我们应该 重定向到登录页面(/login) . . 另一种方式是我们可以传递 session 转至 props，然后重定向至 /dashboard:

   import { getSession } from 'next-auth/client';
   
   
   export const getServerSideProps = async (context) => {
   const session = await getSession(context);
   if(context.res && !session) {
   return {
   redirect: {
   permanent: false,
   destination: '/login'
   }
   }
   }
   
   
   return {
   props: { session },
   redirect: {
   permanent: false,
   destination: '/dashboard'
   }
   }
   }
   
   
   

2. CLIENT-SIDE -您可以使用例如 useRouter钩子:

   import { useRouter } from 'next/router';
   import { useSession } from 'next-auth/client';
   
   
   const router = useRouter();
   const [ session, loading ] = useSession();
   
   
   if (typeof window !== 'undefined' && loading) return null;
   
   
   if (typeof window !== 'undefined' && !session) {
   router.push('/login');
   }
   
   
   router.push('/dashboard');
   

更多信息请点击: https://github.com/vercel/next.js/discussions/14890

在 NextJs v9.5及以上版本中，您可以在 Next.config.js文件中配置重定向和重写。

但是如果使用 trailingSlash: true，请确保源路径以斜杠结束，以便进行适当的匹配。

module.exports = {
trailingSlash: true,
async redirects() {
return [
{
source: '/old/:slug/', // Notice the slash at the end
destination: '/new/:slug',
permanent: false,
},
]
},
}

您还需要考虑可能影响路由的其他插件和配置，例如 下一张图片。

文件: https://nextjs.org/docs/api-reference/next.config.js/redirects

下面是避免 URLs is malformed. Please use only absolute URLs错误的中间件解决方案。

此外，使用路径对象可能是处理重定向的更干净的方法。

// pages/_middleware.ts


import { NextRequest, NextResponse } from 'next/server';


export async function middleware(req: NextRequest) {
const { pathname, origin } = req.nextUrl;


const paths: { [key: string]: string } = {
'/admin/appearance': `${origin}/admin/appearance/theme`,
};


const rePath = paths[pathname];
if (rePath) return NextResponse.redirect(rePath);
else return NextResponse.next();
}

useEffect会重定向，但会立即跳回到当前页面

Something useLayoutEffect的作用就像一种魅力:

const router = useRouter();


useLayoutEffect(() => {
router.isFallback && router.replace("/course");
}, [router]);

我已经使用了相同的代码上面的使用效果。

♂如果有人能解释为什么，提前感谢！

可以设置基路径。下一个 Js 允许您这样做。例如，要使用/login 而不是/(默认) ，打开 next.config.js 并添加 basePath 配置:

  const nextConfig = {
basePath: "/login",
};


module.exports = nextConfig;

你也可以在这里查看他们的文件 https://nextjs.org/docs/api-reference/next.config.js/basepath

Next.js > = 12.1

相对 URL 在重定向中不再允许 ，并将抛出:
Error: URLs is malformed. Please use only absolute URLs.

使用 中间件和 Next.js > = 12.1重定向:

1. 创建与 pages目录相同级别的 middleware.ts(或. js)文件
2. 导出 middleware函数
3. 创建一个 绝对网址并将其传递给 redirect

TypeScript 示例 middleware.ts:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'


export function middleware(request: NextRequest) {
const url = request.nextUrl.clone()
if (url.pathname === '/') {
url.pathname = '/hello-nextjs'
return NextResponse.redirect(url)
}
}

重定向 从 Next.js 9.5开始，您现在可以在重定向键下在 next.config.js 中创建一个重定向列表:

// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/about',
destination: '/',
permanent: true,
},
];
},
};

官方文件