How to use with the Browser Router

[rawroland]

Background

The documentation shows instructions on how to use the library with the normal Router of the react-router-dom library. The Router is initialized with the history prop as follows:

<Router routes={routes} history={piwik.connectToHistory(history)} />

Doing this with Browser Router generates the following warning: Warning: ignores the history prop. To use a custom history, use import { Router } instead of import { BrowserRouter as Router }.

This leads me to believe that the connectToHistory method has no effect in this situation.

Issue

Are there any instructions on how to use this library with the Browser Router?

[guillaumeparis2000]

No, for the moment I haven't try to use Browser Router. After looking at Browser Router, I don't think you can do:

<Router routes={routes} history={piwik.connectToHistory(history)} />

but you probably can do something like this:

<BrowserRouter history={piwik.connectToHistory(history)}>

[rawroland]

Thanks for the speedy reply and for the library. We currently have:

    <BrowserRouter history={piwik.connectToHistory(history)}>

which keeps failing with the aforementioned error.

[guillaumeparis2000]

I think BrowserRouter is incompatible with react-piwik.

[msde]

I had to use Router, not BrowserRouter:

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

const piwik = new ReactPiwik({
  ...
});
const history = createHistory();
...
      <Router history={piwik.connectToHistory(history)}>
...

Edit: Still having some trouble

[guillaumeparis2000]

@msde Thanks for your feed back

[peterbartos]

Unfortunately using Router instead BrowserRouter causes that we cannot use useLocation/useNavigate hooks, which are available only in BrowserRouter. Making it work somehow with BrowserRouter would be useful.