Detectar cambio de ruta con react-router

Tenemos el arreglo a este rompecabezas, o por lo menos eso creemos. Si tienes inquietudes puedes dejarlo en el apartado de preguntas y sin tardanza

Solución:

Puedes hacer uso de history.listen() función al intentar detectar el cambio de ruta. Teniendo en cuenta que está utilizando react-router v4envuelva su componente con withRouter HOC para obtener acceso a la history apuntalar.

history.listen() devuelve un unlisten función. Usarías esto para unregister de escuchar

Puedes configurar tus rutas como

índice.js

ReactDOM.render(
      
            
                   
                   
           
        ,
  document.getElementById('root')
);

y luego en AppContainer.js

class App extends Component 
  
  componentWillMount() 
    this.unlisten = this.props.history.listen((location, action) => 
      console.log("on route change");
    );
  
  componentWillUnmount() 
      this.unlisten();
  
  render() 
     return (
         
this.props.children
      );
  

export default withRouter(App);

De los documentos de historia:

Puede escuchar los cambios en la ubicación actual usando
history.listen:

history.listen((location, action) => 
      console.log(`The current URL is $location.pathname$location.search$location.hash`)
  console.log(`The last navigation action was $action`)
)

El objeto de ubicación implementa un subconjunto de la interfaz window.location, que incluye:

**location.pathname** - The path of the URL
**location.search** - The URL query string
**location.hash** - The URL hash fragment

Las ubicaciones también pueden tener las siguientes propiedades:

ubicación.estado – Algún estado adicional para esta ubicación que no reside en la URL (compatible con createBrowserHistory y
createMemoryHistory)

location.key – Una única string que representa esta ubicación (compatible con createBrowserHistory y createMemoryHistory)

La acción es una de PUSH, REPLACE, or POP dependiendo de cómo el usuario llegó a la URL actual.

Cuando usa react-router v3, puede hacer uso de history.listen() desde history paquete como se mencionó anteriormente o también puede hacer uso browserHistory.listen()

Puedes configurar y usar tus rutas como

import browserHistory from 'react-router';

class App extends React.Component 

    componentDidMount() 
          this.unlisten = browserHistory.listen( location =>  
                console.log('route changes');
                
           );
      
    
    componentWillUnmount() 
        this.unlisten();
     
    
    render() 
        return (
               
                   
                   
                   
            
        )
    
 

Actualización para React Router 5.1+.

import React from 'react';
import  useLocation, Switch  from 'react-router-dom'; 

const App = () => 
  const location = useLocation();

  React.useEffect(() => 
    console.log('Location changed');
  , [location]);

  return (
    
      /* Routes go here */
    
  );
;

Si quieres escuchar la history objeto globalmente, tendrás que crearlo tú mismo y pasárselo al Router. Entonces puedes escucharlo con su listen() método:

// Use Router from react-router, not BrowserRouter.
import  Router  from 'react-router';

// Create history object.
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

// Listen to history changes.
// You can unlisten by calling the constant (`unlisten()`).
const unlisten = history.listen((location, action) => 
  console.log(action, location.pathname, location.state);
);

// Pass history to Router.

   ...

Aún mejor si crea el objeto de historial como un módulo, para que pueda importarlo fácilmente en cualquier lugar donde lo necesite (por ejemplo, import history from './history';

Reseñas y puntuaciones del artículo

Si crees que te ha sido provechoso este post, te agradeceríamos que lo compartas con más entusiastas de la programación de este modo contrubuyes a extender este contenido.

---

---

Utiliza Nuestro Buscador