Блог

Я запускаю Next.js приложение в localhost: 3000, которое изначально перенаправляет на страницу входа в систему, если там нет пользовательских данных. Изначально он перенаправляет на страницу входа, но не отображается, и я получаю эту ошибку:

 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

Заранее спасибо.

Вы не возвращаете router.push — это не React child так.

Я предлагаю вам попробовать с:

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

  

Спасибо.

Что ж, после изучения следующих документов я, наконец, смог заставить его работать с getInititalProps:

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

Спасибо.