índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.querySelector('#root'));
Aplicación.js
import React from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Join from './components/Join'; import Chat from './components/Chat'; const App = () => ( <Routes> <Route path='/' exact component={Join} /> <Route path='/chat' component={Chat} /> </Routes> ); export default App;
Muestra un error como "Error: useRoutes() solo se puede usar en el contexto de un componente".
Aquí está el ERROR: "
Debe envolver su aplicación en el componente BrowserRouter para poder usar el enrutamiento
Entonces el código en index.js será el siguiente
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; ReactDOM.render(<BrowserRouter> <App /> </BrowserRouter>, document.querySelector('#root'));
En su lugar, podría envolver la aplicación en App.js
import React from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Join from './components/Join'; import Chat from './components/Chat'; const App = () => ( <BrowserRouter> <Routes> <Route path='/' exact component={Join} /> <Route path='/chat' component={Chat} /> </Routes> </BrowserRouter> ); export default App;
pero para un código más limpio, haga el primer enfoque
Envuelva su código dentro <BrowserRouter>
asegurándose de que no esté en la aplicación en sí, sino más arriba en el árbol.