我有一個作業的 npm 專案，正在嘗試將一個 javascript 檔案 (App.js) 添加到 index.html
索引.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="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
應用程式.js
import React, { Component } from 'react';
import './App.css'
class App extends Component {
render() {
return "Testing"
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from './components/App';
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import {
Navigation,
Footer,
Home,
About
} from "./components";
ReactDOM.render(<App />,
<Router>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
<Footer />
</Router>,
document.getElementById("root")
);
serviceWorker.unregister();
我收到錯誤訊息“目標容器不是 DOM 元素”。對此的其他答案已經說過將 index.html 中的 div id="root" 行放在我已經完成的正文的末尾。如果有人可以幫助我弄清楚為什么會出現此錯誤，那將非常有幫助。先感謝您。
uj5u.com熱心網友回復：
ReactDOM.render需要 2 個引數：要渲染的組件和父元素，即目標。你給它 3 個引數。
您需要將您擁有的內容包裝在一個片段中或修復App為實際上是包裝器。
ReactDOM.render(
<>
<App />
<Router>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
<Footer />
</Router>
</>,
document.getElementById("root")
);
要么
class App extends Component {
render() {
return (<Router>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
<Footer />
</Router>);
}
}
// ...
ReactDOM.render(
<App />,
document.getElementById("root")
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452214.html
標籤：javascript html 反应 dom 容器