Astro集成React与Auth0时报错：需用<Auth0Provider>包裹组件

我在Astro框架中使用React实现Auth0登录登出功能时，点击登录按钮触发了错误提示："You forgot to wrap your component in "，希望解决这个问题，实现点击按钮跳转至Auth0认证页面的功能。

现有代码： #

auth.jsx

import React from "react";
import ReactDOM from "react-dom";
import { Auth0Provider } from "@auth0/auth0-react";
import App from "./App";

ReactDOM.render(
  <Auth0Provider
    domain="dev-4zv7m442pt5chyhf.us.auth0.com"
    clientId="VpYTVz16tZ9gswpbDTrPl4BmiVPnsskB"
    authorizationParams={{
      redirect_uri: window.location.origin
    }}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

App.jsx

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const App = () => {
  const { loginWithRedirect } = useAuth0();

  return (
    <div>
        <h2>AppLogin</h2>
            <button onClick={() => {console.log('click'); loginWithRedirect()}}>Log In</button>
    </div>
    );
}

export default App;

Astro页面文件

---
import App from "../utils/App";
---

<App client:load />

问题原因 #

当前代码里的auth.jsx是用ReactDOM.render直接挂载到#root节点的逻辑，但在Astro项目中，你是直接在Astro页面导入并渲染App组件，这时候App并没有被Auth0Provider包裹——因为auth.jsx里的代码根本没被执行，Astro不会自动运行这个文件的挂载逻辑。

解决步骤 #

1. 创建Auth0Provider包裹组件
   在项目中新建AuthProviderWrapper.jsx文件：

import React from "react";
import { Auth0Provider } from "@auth0/auth0-react";

export default function AuthProviderWrapper({ children }) {
  return (
    <Auth0Provider
      domain="dev-4zv7m442pt5chyhf.us.auth0.com"
      clientId="VpYTVz16tZ9gswpbDTrPl4BmiVPnsskB"
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
      {children}
    </Auth0Provider>
  );
}

2. 修改Astro页面，用包裹组件套住App
   更新你的Astro页面代码：

---
import AuthProviderWrapper from "../utils/AuthProviderWrapper";
import App from "../utils/App";
---

<AuthProviderWrapper client:load>
  <App />
</AuthProviderWrapper>

验证效果 #

修改完成后，点击页面上的「Log In」按钮，应该能正常跳转到Auth0的认证页面，不会再出现Provider未包裹的错误提示。

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