Как узнать событие изменения моей страницы / местоположения в react-router-dom V4.3.1

Question

Я использую react-router-dom V4.3.1. Я хотел бы реализовать веб-аналитику в моем приложении для реагирования на каждое изменение страницы / местоположения. Не могли бы вы предложить какое-нибудь решение?

Answer 1

Обходной путь показан ниже:

const invokeMyWebAnalyticProvider = () => {
  //Code to invoke your analytics
}
const invokeWebTracker = () => {
  if(typeof window.localStorage.getItem('currentPage') !== 'undefined'){
    if(window.localStorage.getItem('currentPage') !== window.location.pathname){
      window.localStorage.setItem('currentPage', window.location.pathname);
      invokeMyWebAnalyticProvider();
    }
  }
}
const Router = () => (
  <MainWrapper>
      {invokeWebTracker()}
      <Switch>        
        <Route exact path='/' component={Login} />
        .
        .
        .
      </Switch>    
  </MainWrapper>
);

С помощью этого кода я могу отслеживать изменения страницы / местоположения в Web Analytics. Но его нельзя использовать для отслеживания событий. Если вам нужно отслеживание событий, необходимо добавить код в каждый компонент.

Может ли кто-нибудь проверить это решение?

Answer 2

Вы можете прослушивать изменения текущего местоположения, используя history.listen :

import React, { useEffect } from 'react'
import history from '../routes/history'

export default function App() {

  useEffect(() => {
    // Listen for changes to the current location.
    const unlisten = history.listen((location, action) => {
      // location is an object like window.location
      console.log(
        `The current URL is ${location.pathname}${location.search}${location.hash}`
      )
      console.log(`The last navigation action was ${action}`)
    })
    return function cleanup() {
      // To stop listening, call the function returned from listen().
      unlisten()
    }
  }, [])

  return (
    <div>
      Hello, World!
      {/* <MyRoutes /> */}
    </div>
  )
}

Существуют различные способы получить доступ к объекту history в зависимости от версии вашего реактивного маршрутизатора или настройка маршрутизации.

Вы можете использовать withRouter HO C или createBrowserHistory() из пакета history , если настроены маршруты с использованием Router . Для тех, кто использует response-router v5, для получения объекта истории также можно использовать хук useHistory.

Если вы используете версию реакции до 16.8 , вы можно использовать componentDidMount и componentWillUnmount вместо useEffects.