為什么 nextjs 退出 MSAL oauth 進程后會返回錯誤？

Question

使用 next.js 構建網站時出現錯誤。 我已經為生產運行構建了站點，並且在驗證后我在下面收到此錯誤。 我已經集成了 MSAL 進行身份驗證，這讓我可以通過 Azure AD 控制訪問。 在 Oauth 循環之后，我收到以下錯誤。 我不知道是什么原因造成的，因為我是 next.js 的新手並且以前使用過 Express。 經過一番研究，我發現有人用 <React.Fragment></React.Fragment> 解決了它，但我似乎也無法用它來解決它。

代碼

index.js（主頁）

import {
    AuthenticatedTemplate,
    UnauthenticatedTemplate,
    useMsal,
} from '@azure/msal-react';
import Head from 'next/head';
import Link from 'next/link';
import styles from '../styles/Home.module.css';
import { Logo } from '../services/components'
import * as React from 'react';

function SignInButton() {
    // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
    const { instance } = useMsal();

    return (<button onClick={() => instance.loginRedirect()} className={styles.auth }><h2>Sign In</h2></button>);
}

function SignOut() {
    const { instance } = useMsal();

    return (
        <div className={styles.grid}>
            <button onClick={ () => instance.logoutRedirect() } className={styles.auth}>
                <h2>Sign Out</h2>
            </button>
        </div>
        )
}

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
            </Head>
            <AuthenticatedTemplate>
                <title>SD Menu</title>
                <main className={styles.main }>
                    <div className={styles.container}>
                        <div className={styles.grid}>
                            <Logo />
                        </div>
                            <p className={styles.description}>
                            Choose a service from below.
                        </p>
                <div className={styles.grid}>

                    <Link href="/pcdecomservice" className={styles.card}>
                        <h2>Decomission a Computer</h2>
                        <p>Decomission a computer automatically in line with the SOP.</p>
                    </Link>
                    <Link href="/" className={styles.card}>
                        <h2>Create a New User</h2>
                        <p>Create a new user with predefined groups and settings.</p>
                    </Link>
                    <Link href="/" className={styles.card}>
                        <h2>Enable a mailbox</h2>
                        <p>Enable a mailbox for use.</p>
                    </Link>
                            </div>
                        <SignOut/>

                    </div>

                </main>
                </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <title>SD Login</title>
                <div className={styles.container}>
                    <div className={styles.main}>
                        <div className={styles.grid}>
                            <Logo />
                        </div>
                        <p className={styles.description}>
                            Please sign in to access this service
                        </p>
                        <div className={styles.grid}>
                            <SignInButton />
                        </div>
                    </div>
                </div>
            </UnauthenticatedTemplate>
        </div>
    );
}

組件.js

import Image from 'next/image';


export function Logo() {

    return (
        <Image
            src="https://upload.wikimedia.org/wikipedia/en/thumb/b/bb/Kingspan_Group_%28building_materials_company%29_logo_with_lion.svg/220px-Kingspan_Group_%28building_materials_company%29_logo_with_lion.svg.png"
            alt="Kingspan Logo"
            width="220"
            height="108"
        />
        )
}

Answer 1

又過了幾分鍾，我決定在 Next Dev 中重新運行代碼。

錯誤要好得多，並指出標簽有多個子元素。 我通過將其更改為以下解決了它：

前

   <Link className={styles.card}>
      <h2>Create a New User</h2>
      <p>Create a new user with predefined groups and settings.</p>
   </Link>

后

<Link href="/" >
   <a className={styles.card}>
      <h2>Create a New User</h2>
      <p>Create a new user with predefined groups and settings.</p>
   </a>
</Link>

原來我只是愚蠢，拿了一篇文章從標簽中刪除href，並將它們更改為一個標簽太字面意思。

為什么 nextjs 退出 MSAL oauth 進程后會返回錯誤？

問題描述

1 個解決方案

解決方案1
1 2022-07-16 15:39:24

為什么 nextjs 退出 MSAL oauth 進程后會返回錯誤？

問題描述

1 個解決方案

解決方案1 1 2022-07-16 15:39:24

解決方案1
1 2022-07-16 15:39:24