英文:
ReferenceError: document is not defined (React)
问题
我尝试使用路由来渲染我的主页，但仍然出现相同的ReferenceError。
以下是我的代码：
import React from "react";
import ReactDOM from "react-dom/client";
import App from "../components/app";
import reportWebVitals from "./reportWebVitals";
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
import Product from "./products/product";
const router = createBrowserRouter([
{
path: "/",
element: <App />,
},
]);
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
reportWebVitals();
英文:
I tried to render my main page working with routes and I still have the same ReferenceError.
Here's my code :
import React from "react";
import ReactDOM from "react-dom/client";
import App from "../components/app";
import reportWebVitals from "./reportWebVitals";
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
import Product from "./products/product";
const router = createBrowserRouter([
{
path: "/",
element: <App />,
},
]);
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
reportWebVitals();
答案1
得分: 1
在与 OP 进行聊天会话时，发现他正在使用 Next.JS，这是一个进行服务器端渲染（SSR）的框架，因此没有 document，因为它使用服务器端渲染。
对于 OP 的解决方案就是一开始不要执行任何 React 挂载相关的操作，因为这些都已经为你处理好了，包括路由逻辑、TypeScript 支持等等。
对于那些刚开始学习 React 并使用 Next.JS 的人，一个建议是首先查阅 Next.JS 的具体文档，然后再转向互联网上找到的其他 React 教程，这样这些教程会更容易理解。
英文:
Seen as people are still replying to this question, during a Chat session with OP, it turns out he's using Next.JS, this does SSR and as such doesn't have document as it's using Server Side Rendering.
The solution for the OP, was just don't do any React mounting stuff in the first place, as this is all handled for you, including routing logic, Typescript support etc etc.
For those just starting React & using Next.JS, one bit of advice is to follow Next.JS specific documentation to start, and then move onto other React tutorials found on the internet, and then these will make more sense.
答案2
得分: 0
createRoot(rootElement) 是一个用于创建 React 根元素的 React 实用函数，它是一个 DOM 元素，用于 UI 组件渲染自身。它的参数是应该创建的根元素。这个根元素不是一个 React 组件，只是一个用于 React 渲染自身的空的 div 元素。
因此，你应该在 HTML 文件中有一个空的 div，它的 id="root"，以便渲染 React 页面。
英文:
createRoot(rootElement) is a React utility function used to create a react root element, which is a DOM element in which UI components render themselves. It takes as a parameter the root element that should be created. This root element is not a React component, it is simply an empty div element that is used for React to render itself.
So you should have an HTML file with empty div and id="root" in order to render the react page.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论