En condolencia dice:
Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
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;Intente cambiar "Router" a "Rutas". Utilice también "exacta" en el componente "Ruta".
Siempre lo hago así.
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> ...Si esto no ayuda, tal vez pueda encontrar su solución aquí: https://reactjs.org/warnings/invalid-hook-call-warning.html#:~:text=Hooks%20can%20only%20be%20called,of %20React%20and%20React%20DOM.&text=Usted%20podría%20tener%20más%20que,React%20en%20la%20misma%20aplicación.