Next.js中如何通过返回组件实现类似react-router Navigate的跳转？

根据你使用的 Next.js 路由系统（Pages Router / App Router），可以用以下两种方式实现和 react-router Navigate 组件一致的跳转效果，完全不依赖 react-router：

1. Pages Router（pages 目录结构） #

Next.js 没有内置等价组件，但可以自己封装一个复用的 Navigate 组件，封装后就能像 react-router 那样通过返回组件完成跳转：

封装 Navigate 组件 #

// components/Navigate.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Navigate({ to }) {
  const router = useRouter();

  useEffect(() => {
    router.push(to);
  }, [router, to]);

  return null;
}

页面中使用 #

import Navigate from '../components/Navigate';
import { useAuth } from '../hooks/useAuth';

const Page = () => {
  const { user } = useAuth();

  if (user?.role.name === "user") {
    return <Navigate to="/app" />;
  } else {
    return <Navigate to="/app/workspaces" />;
  }
};

export default Page;

2. App Router（app 目录结构） #

针对 Next.js 13+ 的 App Router，分两种场景处理：

客户端组件场景（依赖客户端 Hook 如 useAuth） #

同样封装一个客户端版的 Navigate 组件：

// app/components/Navigate.js
'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function Navigate({ to }) {
  const router = useRouter();

  useEffect(() => {
    router.push(to);
  }, [router, to]);

  return null;
}

页面中使用 #

'use client';

import Navigate from './components/Navigate';
import { useAuth } from './hooks/useAuth';

export default function Page() {
  const { user } = useAuth();

  if (user?.role.name === "user") {
    return <Navigate to="/app" />;
  } else {
    return <Navigate to="/app/workspaces" />;
  }
}

服务端组件场景（可服务端获取用户信息） #

如果你的用户信息可以在服务端获取（比如通过服务端 Auth 逻辑），可以直接使用 Next.js 内置的 redirect 函数，无需返回组件：

import { redirect } from 'next/navigation';
import { getServerAuthSession } from './auth';

export default async function Page() {
  const session = await getServerAuthSession();
  const user = session?.user;

  if (user?.role.name === "user") {
    redirect('/app');
  } else {
    redirect('/app/workspaces');
  }
}

内容的提问来源于stack exchange，提问作者Samyar