Intentando crear un enrutador simple con un objeto de historial predeterminado, pero arroja este error:
Módulo no encontrado: Error: No se puede resolver 'historial/crear Historial del Navegador'
En el archivo App.js -
import history from './history' const App = () => { return ( <div className="ui container" style={{marginTop: '50px'}}> <Router history={history}> <Header /> <Routes> <Route path="/" exact element={<StreamList />} /> </Routes> </Router> </div> ); };En el archivo history.js -
import createHistory from 'history/createBrowserHistory' export default createHistory();También probé la solución mencionada en Módulo no encontrado: Error: no se puede resolver 'history/createBrowserHistory' , pero ahora no representa el componente de la aplicación en absoluto y aparece el siguiente error en la consola
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'pathname') en el enrutador
¿Cuál podría ser la razón? Instalé una dependencia de historial separada, pero aún no funciona.
Parece que ha importado incorrectamente la función de utilidad createBrowserHistory . Se debe importar la exportación denominada createBrowserHistory .
historia.js
import { createBrowserHistory } from 'history'; export default createBrowserHistory();Con el siguiente error:
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'pathname') en el enrutador
Sospecho que no ha importado el componente de enrutador correcto. Todos los enrutadores de alto nivel ( BrowserRouter , HashRouter , etc. ) instancian y mantienen una referencia de history interno, y el Router de bajo nivel tiene algunos accesorios necesarios, ninguno de los cuales es history . Importe y use el HistoryRouter y proporcione su objeto de historial personalizado como accesorio.
aplicación.js
import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"; import history from './history'; const App = () => { return ( <div className="ui container" style={{ marginTop: '50px' }}> <HistoryRouter history={history}> <Header /> <Routes> <Route path="/" element={<StreamList />} /> </Routes> </HistoryRouter> </div> ); };Acerca del problema:
Módulo no encontrado: Error: No se puede resolver 'historial/crear Historial del Navegador'
Creo que el problema está en el nombre del módulo de historial. No hay un módulo con el nombre 'history/createBrowserHistory'. Prueba eso en su lugar:
//history.js import {createBrowserHistory} from 'history' export default createBrowserHistory()Acerca del problema:
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'pathname') en el enrutador
Si usa react-router 6, entonces el componente Router no tiene historial en sus accesorios. Puedes intentar algo así:
<Router location={history.location} navigator={history}>Pero recomendaría seguir ese consejo: https://reactrouter.com/en/main/routers/router