使用浏览器路由器时出现空白页，并且在不使用浏览器路由器进行路由时正常工作

Question

吊唁中说：

无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. React和渲染器的版本可能不匹配(例如React DOM(
2. 你可能违反了胡克规则
3. 同一应用程序中可能有多个React副本

import './App.css';
import Home from './pages/home';
import Navbar from './components/navbar';
import { BrowserRouter, Router, Route } from "react-router-dom";
function App() {
return (
<div className="App">
<Navbar />
<BrowserRouter>
<Router>
<Route path="/home" element={<Home />} />
</Router>
</BrowserRouter>
</div>
);
}
export default App;

Answer 1

尝试更改"路由器"；至"；路由"；。也可使用"；精确的"；在"；路由"-组成部分

我总是那样做。

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Home } from './components/home/Home';
...
<Router>
<Routes>
<Route path="/" exact element={<Home></Home>} />
</Routes>
</Router>
...

如果这没有帮助，您可以在这里找到解决方案：https://reactjs.org/warnings/invalid-hook-call-warning.html#:~：text=挂钩%20只能%20调用%20，属于%20React%20和%20React%20DOM&text=你%20权利%20拥有%20更多%20权力，在%20相同的%20应用程序中反应%20。