Nextjs выдает React.Children.only expected, но непонятно почему?

Question

[WizardW]

Моя страница в pages и её компонент:

import React from "react";
import Link from "next/link";
import { StylesProvider } from "@material-ui/core/styles";
import { Container, TextField, Button } from "@material-ui/core";
import Navbar from "../../components/Navbar";

const LoginPage = () => (
  <StylesProvider injectFirst>
    <Navbar />
    <Container className="signup-form-container" maxWidth="xs">
      <div className="form-label">
        <h2>LaGrange</h2>
        <h3>Log in</h3>
      </div>
      <form>
        <TextField
          autoFocus
          className="form-input"
          variant="outlined"
          required
          label="Email"
        />
        <TextField
          className="form-input"
          required
          label="Password"
          type="password"
          autoComplete="current-password"
          variant="outlined"
        />
        <Button color="primary" variant="contained">
          Log in
        </Button>
        <Link className="form-link-label" href="/signup">
          Don't have an account? Sign up
        </Link>
      </form>
    </Container>
  </StylesProvider>
);

export default LoginPage;

Получаю React.Children.only expected to receive a single React element child.

Answer 1

[WizardW]

Link от Next.js принимает только один параметр, поэтому пришлось всё содержимое в Link обернуть в React.Fragment.

Answer 2

[Дмитрий]

Попробуйте обернуть содержимое <Container> во <Fragment></Fragment>