我有一个正在运行的npm项目，正在尝试将一个javascript文件(App.js(添加到index.html
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="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>
App.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行，我已经做了。如果有人能帮我弄清楚为什么会出现这个错误，那将非常有帮助。
ReactDOM.render需要两个参数：要渲染的组件和父元素aka target。你给它三个论点。
您将希望将您所拥有的内容封装在一个片段中，或者将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")
);