Estoy tratando de resolver un problema con una llamada de enlace no válida cuando uso react-router-dom, particularmente la importación de BrowserRouter como enrutador, enrutador y encerrándolo así:

 import React from 'react'; import {BrowserRouter as Router, Route} from 'react-router-dom' import 'semantic-ui-css/semantic.min.css' import './App.css' import Home from './pages/Home' import Register from './pages/Register' import Login from './pages/Login' import MenuBar from './components/MenuBar' export default function App() { return ( <Router> <MenuBar /> <Route path='/'> <Home /> </Route> <Route path='/login'> <Login /> </Route> <Route path='/register'> <Register /> </Route> </Router> ); }

Me da el error: Hook Call inválido

Mi index.js se parece a:

 import ReactDOM from 'react-dom'; import reportWebVitals from './reportWebVitals'; import ApolloProvider from './ApolloProvider' ReactDOM.render( ApolloProvider, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. reportWebVitals();

y mi ApolloProvider así:

 import React from 'react' import App from './App' import ApolloClient from 'apollo-client' import {InMemoryCache} from 'apollo-cache-inmemory' import {createHttpLink} from 'apollo-link-http' import {ApolloProvider} from '@apollo/react-hooks' const httpLink = createHttpLink({ uri: 'http://localhost:5000' }) const client = new ApolloClient({ link: httpLink, cache: new InMemoryCache() }) export default ( <ApolloProvider client={client}> <App/> </ApolloProvider> )

No puedo entender por qué estoy viendo un error. No tengo ganchos en ninguno de estos archivos. ¡Cualquier ayuda es apreciada!