马托莫-跟踪器-反应使用马托莫返回"Invalid hook call"

Question

im试图在我的react应用程序(cra(中实现matomo分析，但它处理了一个无效的钩子调用异常。代码已从简单示例中复制https://www.npmjs.com/package/@datapunt/matomo跟踪器react

我错过什么了吗？

反应：17.0.2反应时间：17.0.2

代码：

Index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/store";
import { MatomoProvider, createInstance } from "@datapunt/matomo-tracker-react";
const matomo = createInstance({
urlBase: "http://192.168.133.226/",
siteId: 3,
heartBeat: {
active: true,
seconds: 10,
},
linkTracking: false,
configurations: {
disableCookies: true,
setSecureCookie: true,
setRequestMethod: "POST",
},
});
ReactDOM.render(
<MatomoProvider value={matomo}>
<Provider store={store}>
<App />
</Provider>
</MatomoProvider>,
document.getElementById("root")
);

App.js

import React, { useEffect } from "react";
import "./App.scss";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { useMatomo } from "@datapunt/matomo-tracker-react";
import Navigation from "./components/navigation/navigation";
import Sitemap from "./components/sitemap/sitemap";
import Main from "./pages/main/main";
function App() {
const modal = useSelector((state) => state.modal);
const items = useSelector((state) => state.items);
const app = useSelector((state) => state.app);
const dispatch = useDispatch();
const { trackPageView } = useMatomo();
useEffect(() => {
trackPageView();
// eslint-disable-next-line
}, []);
return (
<div className='app'>
<Router>
<Navigation />
<Sitemap />
<Main />
</Router>
</div>
);
}
export default App;

Answer 1

您需要首先创建Matamo实例，然后围绕它包装所有内容。请参阅https://www.npmjs.com/package/@datapunt/matomo跟踪器react

Answer 2

https://github.com/jonkoops/matomo-tracker/tree/main/packages/react

使用这个&重试：

• npm install@jonkops/matomo tracker react

• 从"@jonkops/matomo-tracker react"导入｛MatomoProvider，createInstance｝

• 从"@jonkops/matomo tracker react"导入｛useMatomo｝