React呈现黑屏无错误

Question

React正在呈现屏幕，除了它的空白，没有任何错误。它需要显示hello world，作为我的测试，它正在工作。我用的是Routes和Route。有什么建议吗?

import {
BrowserRouter as Router,
Routes,
Route,
useNavigate,
} from "react-router-dom";
import "./App.css";
import Search from "./pages/Search";
import Home from "./pages/Home";
import Reccomendations from "./pages/Reccomendations";
function App() {
return (
<div className="App">
<Router>
<div>Hello world</div>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/reccomendations" element={<Reccomendations />} />
<Route path="/search" element={<Search />} />
</Routes>
</Router>
</div>
);
}
export default App;

Answer 1

我想我得到了你的问题默认情况下，create -react-app有深色背景，所以你的文本可能不可见的背景颜色，你可以从主div中删除classNameprop或在<div>Hello world</div>中添加style={{color:'white'}}，如果它仍然不工作，然后复制粘贴到你的App.js文件

import Home from "./pages/Home";
import Reccomendations from "./pages/Reccomendations";
import { BrowserRouter, Routes, Route } from "react-router-dom";
export default function App() {
return (
<>
<BrowserRouter>
<div>Hello world</div>
<Routes>
<Route exact path="/"  element={<Home />} />  
<Route exact  path="/reccomendations" element={<Reccomendations />} />
<Route exact path="/search" element={<Search />} />
</Routes>
</BrowserRouter>
</>
);}

如果还是不行，请告诉我。