Next.js router.push() 重定向但不呈现页面答案

【问题标题】：Next.js router.push() redirects but doesn't render pageNext.js router.push() 重定向但不呈现页面
【发布时间】：2021-01-08 16:39:26
【问题描述】：

我在 localhost:3000 中运行 Next.js 应用程序，如果没有用户数据，它最初会重定向到登录页面。最初它重定向到登录页面，但它没有呈现，我得到这个错误：

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in Index (at _app.js:7)
    in ApolloProvider (at _app.js:6)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

我不确定我做错了什么。我是 Next.js 的新手，不知道如何处理。

任何帮助将不胜感激。

这是我的代码：

import Layout from '../components/Layout';
import Client from '../components/Client';
import { useRouter } from 'next/router';
import { useQuery } from '@apollo/client';
import { queryGetClientsVendor } from '../graphql/queries';
import Link from 'next/link';

const Index = () => {
  const router = useRouter();

  const { data, loading, error } = useQuery(queryGetClientsVendor);
  console.log(data, loading, error);

  if (loading) return 'Loading...';

  if (!data.getClientsVendor) {
    return router.push('/login');
  }

  return (
    <div>
      <Layout>
        <h1 className='text-2xl text-gray-800 font-normal'>Index</h1>
        <Link href='/newclient'>
          <a className='bg-blue-800 py-2 px-5 mt-5 inline-block text-white rounded text-sm hover:bg-gray-800 mb-3 uppercase font-bold'>
            New Client
          </a>
        </Link>

        <table className='table-auto shadow-md mt-10 w-full w-lg'>
          <thead className='bg-gray-800'>
            <tr className='text-white'>
              <th className='w-1/5 py-2'>Name</th>
              <th className='w-1/5 py-2'>Company</th>
              <th className='w-1/5 py-2'>Email</th>
              <th className='w-1/5 py-2'>Delete</th>
              <th className='w-1/5 py-2'>Edit</th>
            </tr>
          </thead>

          <tbody className='bg-white'>
            {data.getClientsVendor.map((client) => (
              <Client key={client.id} client={client} />
            ))}
          </tbody>
        </table>
      </Layout>
    </div>
  );
};

export default Index;

你也可以在github上查看整个代码项目=>https://github.com/francislagares/crm-react

提前致谢。

【问题讨论】：

标签： reactjs graphql next.js

【解决方案1】：

您不会返回 router.push - 它不会返回 React child。

我建议你试试：

if (!data.getClientsVendor) {
   router.push('/login');
   return <p>Redirecting...</p>;
}

谢谢。

【讨论】：

我已经尝试过并很好地重定向，但是当我登录时它再次重定向到登录页面。登录后我需要重定向到管理页面。

【解决方案2】：

好吧，在深入研究了 Next 文档之后，我终于可以使用 getInitialProps 使其工作：

Index.getInitialProps = async (ctx) => {
  if (ctx && ctx.req) {
    ctx.res.writeHead(302, { Location: '/login' });
    ctx.res.end();
  } else {
    return {};
  }
};

谢谢。

【讨论】：