嗨!我的网页有问题。我用ReactJS + vite做这个网页。问题是：* 目标容器不是DOM元素。*
- React**：17.0.1
- React路由器域**：6.6.1
我有这个版本的React，因为如果我有版本18.0.0，我会有更多的问题与"react-dom/客户端"。
这是我的package.json：
{
"name": "project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"babel-plugin-macros": "^3.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"router-dom": "^2.2.9"
},
"devDependencies": {
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.2",
"@vitejs/plugin-react": "^1.3.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"react-router-dom": "^6.6.1",
"tailwindcss": "^3.2.4",
"vite": "^2.9.5"
},
"eslintConfig": {
"extends":["standard"]
}
}main.jsx：
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)我不明白这个问题。我读过如果把id='root'换成id='app'，它会工作。（但在我的情况下不会）。
这是我的App.jsx：
import React from "react";
import { BrowserRouter, Router, Routes, Route, } from "react-router-dom";
import './App.css';
import Home from "./pages/Home";
import Photos from "./pages/Photos";
import Cookies from "./components/Cookies";
const App = () => {
return (
<BrowserRouter>
<Router>
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}>
<Route index element={<Home />} />
<Route path="photos" element={<Photos />} />
<Route path="cookies" element={<Cookies />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
</div>
</Router>
</BrowserRouter>
);
}
export default App`（已编辑）
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" type="image/svg+xml" href="/img/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Photos</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx" defer></script>
</body>
</html>谢谢!
enter image description here
我尝试了很多改变，谢谢.
1条答案
按热度按时间pxyaymoc1#
首先，一个应用程序中只允许有一个BrowserRouter组件。
因此，App组件应该如下所示
）;}
其次，您的应用程序似乎在html完全加载之前启动了main. jsx文件，因此请在脚本标记中使用"defer"属性
看看这篇文章，它可能会帮助React Error: Target Container is not a DOM Element