In condole it says:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
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;
Try to change "Router" to "Routes". Also use "exact" in the "Route"-Component.
I always do it like that.
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>
...
If this doesn't help you can maybe find your solution here: https://reactjs.org/warnings/invalid-hook-call-warning.html#:~:text=Hooks%20can%20only%20be%20called,of%20React%20and%20React%20DOM.&text=You%20might%20have%20more%20than,React%20in%20the%20same%20app.