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