React router v6 history.listen

import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';

const history = createBrowserHistory();

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

function App() {
  return (
    <Router history={history}>
      {/* Your routes here */}
    </Router>
  );
}

<Router history={history}>
  {/* Your routes here */}
</Router>

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

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
      console.log(`The last navigation action was ${action}`);
    });

    return () => {
      unlisten();
    };
  }, []);

  return <div>My Component</div>;
}