Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

React Static

A fast, lightweight, and powerful framework for building static-progressive React applications and websites.

React Static / General

Anyone have example of how to listen to every React Router navigation change?

Anyone have example of how to listen to every React Router navigation change?

React Static/General · October 31, 2018 at 7:49pm

Anyone have example of how to listen to every React Router navigation change?

React Static / General · October 31, 2018 at 7:49pm
I basically want to run a client side function every time someone move between pages. Trying to figure out how to listen to the router navigation change event

November 7, 2018 at 9:05pm

Use the "withRouter" component supplied by react static to wrap your component. You will then have access to the router in your props. You can then check for route changes in componentWillReceiveProps

import React, { Component } from 'react'
import { withRouter } from 'react-static'

class MyComponent extends Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.location !== this.props.location) {
      console.log('Route change!')
    }
  }
  
  render() {
    return (
      <div>My Component</div>
    )
  }
}

export default withRouter(MyComponent)

Edited
  • reply
  • like

Log in or sign up to chat