1

Estoy tratando de obtener la url de la pagina que visito en react en el app, sin embargo para obtenerla tengo que recargar la pagina, cuando uso el menú de la pagina no obtengo nada, con el window.location.href obtengo la url e hice un useEffect, sin embargo la url no cambia hasta q se recarga totalmente la pagina.

Como podría obtener la url sin recargar solo cuando cambie la página haciendo click en los menus de la página

Gracias por la ayuda

const App = ({user, dispatch, noSessionUser}) => {


    const actualUrl = window.location.href;
    useEffect(()=>{
      alert(actualUrl)
    },[actualUrl])


  return (

        <Router history={history}>
         
              <Switch>
                <Route  path={process.env.PUBLIC_URL + "/"} exact>
                  <Home />
                </Route>
                <Route
                  path={process.env.PUBLIC_URL + "/shop/:productCategory?"}
                  component={Shop}
                />
                <Route
                  path={process.env.PUBLIC_URL + "/about"}
                  component={About}
                />
                <Route
                  path={process.env.PUBLIC_URL + "/contact"}
                  component={Contact}
                />

                <Route
                  path={process.env.PUBLIC_URL + "/login-register"}
                  component={LoginRegister}
                />
                <Route
                  path={process.env.PUBLIC_URL + "/cart"}
                  component={Cart}
                />
              
                <Route exact path={process.env.PUBLIC_URL + "/order"}
                  component={Order}
                />

                <Route
                  path={process.env.PUBLIC_URL + "/shipping-policy"}
                  component={Shipping}
                />



                <Route exact component={NotFound} />
              </Switch>
        </Router>

  );
};






export default App;
0

1 respuesta 1

1

Por el <Switch> deduzco que estás utilizando la versión 5 quizás de react-ruoter-dom.

Lo que está sucediendo es que app no se está rendereando cada vez que llamas a una ruta, sino que se renderea el componente específico, dentro de cada componente podrías obtener la url sin el dominio root mediante el uso del hook useLocation.

Podrías hacer algo así en el componente que deseas que muestre el path:

import { useLocation } from "react-router-dom";

Luego puedes obtener el path de la url actual sin el dominio root haciendo lo siguiente:

let location = useLocation();
console.log(location.pathname) 

Entonces verías impreso en consola del navegador el path, podrías hacer con este dato lo que desees, setearlo en una variable de estado, mostrarlo, etc.


También se puede acceder al path de la URL mediante el uso de la propiedad location usando el hook useHistory, pero debido a razones de mutabilidad, los recursos oficiales de react-router recomiendan useLocation para ese fin.

Link a documentación: https://v5.reactrouter.com/web/api/Hooks/uselocation

2
  • Hola si traté de usarlo, pero obtengo este error TypeError: useContext(...) is undefined, dice que se debe usar la verssion 16.8 de react y tengo la 17 el 11 mar. 2022 a las 13:25
  • Son cosas totalmente diferentes, useContext es para manejar datos de una forma global, sin tener que pasarlos por props, quizás podrías resolver algo de useContext antes o integrar redux a tu proyecto en lugar de useContext. Es difícil ayudarte sin ver código, quizás puedas subir un ejemplo que se pueda probar o link a repo para clonar y hacer las pruebas pertinentes. También es necesario definir exactamente cuando quieres hacer uso de la url actual y para qué. el 11 mar. 2022 a las 15:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.