Reactjs 性能观察员不处理react路由更改

我使用的是performance Observer api，它按照原来的路线工作，但无法进行更改。我尝试了许多不同的方法，但无法使其工作

原路线

import React, { useEffect, Component } from 'react';
import ContextState from './context_state_config';
import history from './utils/history';
import ReactGA from 'react-ga';
import './App.css'

ReactGA.initialize('');




var observer = new PerformanceObserver(list => {
    list.getEntries().forEach(entry => {
      // Display each reported measurement on console
      if (console) {
        console.log(entry);
      }
    })
  });
  observer.observe({entryTypes: [
                                  'navigation',
                                  // 'paint',
                                  // 'resource',
                                  // 'mark',
                                  // 'measure',
                                  // 'frame',
                                  // 'longtask'
                                ]})


history.listen((location) => {

    let observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
          // Display each reported measurement on console
            console.log('ffff');
        })
      });
    observer.observe({entryTypes: [
                                    'navigation',
                                    'paint',
                                    // 'resource',
                                    // 'mark',
                                    // 'measure',
                                    // 'frame',
                                    // 'longtask'
                                  ]});
});


const App = () => {

    return(
      <div className="App">
        React
        <ContextState />
      </div>
    )
}

export default App;

如前所述，当我第一次加载页面时，它会工作，但当我进行路由更改时，控制台上不会打印任何内容

我想让它在每次页面更改时自动运行

当我加载到另一个不是原始app.js页面的页面时，它也可以工作

例如，我直接进入/hooks表单路径并重新加载页面。重新加载页面后，导航计时api打印了正确的结果，但它仍然无法处理子页面更改

---

对不起大家，这是我的错误，但上面发布的代码确实有效

我的问题是我测试了错误的条目：导航和绘制。这两个条目只适用于初始页面加载，因为react是一个单页面应用程序

第一次油漆确实意味着第一次油漆

在测试了其他条目（如mark和measure）后，它会按预期工作

import React, { useContext, useState, useReducer, useEffect } from 'react';
import * as ACTIONS from '../store/actions/actions';
import * as FormReducer from '../store/reducers/form_reducer';
import Context from '../utils/context';
//
// var observer = new PerformanceObserver(list => {
//     list.getEntries().forEach(entry => {
//       // Display each reported measurement on console
//       if (console) {
//         console.log(entry);
//       }
//     })
//   });
//   observer.observe({entryTypes: [
//                                   'navigation',
//                                   'paint',
//                                   // 'resource',
//                                   // 'mark',
//                                   // 'measure',
//                                   // 'frame',
//                                   // 'longtask'
//                                 ]});

const HooksForm1 = () => {
  useEffect(() =>{
    let observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
          // Display each reported measurement on console
          console.log(entry);
        })
      })
    observer.observe({entryTypes: ['paint']})
  }, [])
  const context = useContext(Context)
...