React 索引根未加载为 DOM 元素

问题描述 投票：0回答：1

请注意：我知道我报告的错误与在这个问题以及这个问题中报告的错误相同，但是在阅读这些问题之后，我很清楚它们都是不同的根本问题引起相同的错误。因此，我不相信我的问题是重复的！

原因：在这两种情况下，报告它们的用户需要将 

<div id="root"></div>
放入他们的 
index.html
中。但我已经这样做了，但问题仍然存在。

我是 React 新手，我正在尝试使用 react-oidc-context 项目将我的 React 应用程序集成到我的 Keycloak 服务器。这是我的项目目录结构：

myapp/
    public/
        index.html
    src/
        index.jsx
        main/
            Dashboard.jsx
        web/
            AboutUs.jsx

上面，

AboutUs
页面/路线应该是匿名的并向公众开放，但是
Dashboard
只能在您通过身份验证后才能访问；这意味着如果您尝试访问 
Dashboard
但尚未通过身份验证，您将被重定向到 Keycloak 登录 URL，然后在成功登录后重定向回 
Dashboard
。

我还应该声明，我并没有与

react-oidc-context
图书馆结婚，它只是看起来符合要求，活跃且维护良好。

我的

index.html
是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

我的

index.jsx
是：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { AuthProvider } from "react-oidc-context";
import Dashboard from "./main/Dashboard";
import AboutUs from "./web/AboutUs";
import AccountSettings from "./main/AccountSettings";

const oidcConfig = {
    authority: process.env.REACT_APP_KEYCLOAK_REALM,
    client_id: process.env.REACT_APP_KEYCLOAK_CLIENT,
    redirect_uri: process.env.REACT_APP_KEYCLOK_REDIRECT_URL
};

ReactDOM.render(
    <Router>
        <AuthProvider {...oidcConfig}>
            <Routes>
                <Route path="/dashboard" element={<Dashboard />} />
            </Routes>
        </AuthProvider>
        <Routes>
            <Route path="/about-us" element={<AboutUs />} />
        </Routes>
    </Router>,
    document.getElementById("app")
);

我的

Dashboard.jsx
是：

import React from "react";
import { useAuth } from "react-oidc-context";

function Dashboard() {
    const auth = useAuth();

    switch (auth.activeNavigator) {
        case "signinSilent":
            return <div>Signing you in...</div>;
        case "signoutRedirect":
            return <div>Signing you out...</div>;
    }

    if (auth.isLoading) {
        return <div>Loading Dashboard...</div>;
    }

    if (auth.error) {
        return <div>Oops... {auth.error.message}</div>;
    }

    if (auth.isAuthenticated) {
        return (
        <div>
            Hello {auth.user?.profile.sub}{" "} welcome to the Dashboard!
            <button onClick={() => void auth.removeUser()}>Log out</button>
        </div>
        );
    }

    return <button onClick={() => void auth.signinRedirect()}>Log in</button>;
}

export default Dashboard;

当我运行 

npm start
时，应用程序启动，但是当我在浏览器中转到 
http://localhost:3000
时，我看到：

ERROR
Target container is not a DOM element.
    at Object.render (http://localhost:3000/static/js/bundle.js:35922:15)
    at ./src/index.jsx (http://localhost:3000/static/js/bundle.js:39:40)
    at options.factory (http://localhost:3000/static/js/bundle.js:52145:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:51566:32)
    at http://localhost:3000/static/js/bundle.js:52722:37
    at http://localhost:3000/static/js/bundle.js:52724:12

当我在浏览器中打开 Chrome 开发者工具并刷新时，我看到一堆 304：

有人能发现我哪里出了问题吗？再说一次，我只是想锁定

/dashboard
路线，但将
/about-us
公开/匿名。预先感谢您的任何和所有帮助。

reactjs react-dom react-oidc-context
1个回答
0
投票

您为根 div 元素设置了一个值为“root”的 id。但是在你的index.JSX中你得到了id为“app”的元素，但它在你的index.html中不存在。

这个：

document.getElementById("app")

必须改为：

document.getElementById("root")
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.