Ocurre un error en el siguiente código
history.location.pathname arroja el error (número de línea: 3 y 6)
const LinkList = () => { const history = useHistory(); const isNewPage = history.location.pathname.includes( 'new' ); const pageIndexParams = history.location.pathname.split( '/' ); const page = parseInt( pageIndexParams[pageIndexParams.length - 1] );
He intentado todas las soluciones dadas, pero aún se produce el error.
Aplicación.js
const App = () => { return ( <div className="center w85"> <Header /> <div className="ph3 pv1 background-gray"> <Routes> <Route exact path="/" render={() => <Redirect to="/new/1" />} /> <Route exact path="/create" element={<CreateLink />} /> <Route exact path="/login" element={<Login />} /> <Route exact path="/search" element={<Search />} /> <Route exact path="/home" element={<LinkList />} /> <Route exact path="/new/:page" element={<LinkList />} /> </Routes> </div> </div> ); };
Dependencias:
"react-router": "^5.2.0", "react-router-dom": "^6.0.2",
En react-router-dom
ya no hay un gancho useHistory
, fue reemplazado por un gancho useNavigate
que devuelve una función de navigate
en lugar de un objeto de history
.
Para obtener la ubicación actual, use el useLocation
. De todos modos, ya debería haber estado usando el objeto de location
en lugar del objeto de history
de acuerdo con los documentos v5, ya que el objeto de history
es mutable.
const LinkList = () => { const { pathname } = useLocation(); const isNewPage = pathname.includes('new'); const pageIndexParams = pathname.split('/'); const page = parseInt( pageIndexParams[pageIndexParams.length - 1] ); ...
También es probable que pueda eliminar la dependencia del react-router
react-router-dom
generalmente vuelve a exportar todos los componentes react-router
o, como mínimo, también lo cambia a v6 para que no haya conflicto de versiones entre ellos.
La Redirect
fue reemplazada por el componente Navigate
en RRDv6, la nueva sintaxis para representar una redirección es la siguiente:
<Route path="/" element={<Navigate to="/new/1" replace />} />
Además, en RRDv6 todas las rutas de ruta ahora siempre coinciden exactamente, la propiedad exact
no es parte de la API del componente de Route
.
puede usar useLocation hook o window.location.pathname para acceder al nombre de la ruta
useLocation devuelve el objeto de ubicación actual. let ubicación=usarUbicación() let ruta=ubicación.nombreruta