javascript - HashRouter 和 Google Analytics 无法跟踪单个路径

问题描述

我已经尝试了各种解决方案，我目前正在使用它，不幸的是 GA 只跟踪一个路径（'/'）

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../sass/main.scss';
import {
    HashRouter,
    Route,
    Switch,
} from 'react-router-dom';
const history = createHistory()
ReactGA.initialize('UA-XXXXXXX-1');
history.listen((location, action) => {
    ReactGA.pageview(location.pathname + location.search);
    console.log(location.pathname)
});

class Index extends Component {


    render() {

        return (
            <>
                <HashRouter history={history} >
                    <Route />
                    <ScrollUpButton ContainerClassName="AnyClassForContainer" />
                <Header />
                <Switch history={history}>
                    <Route exact path={"/"} component={() => <HomePage />}/>
                    <Route exact path={"/test"} component={() => <CategoryLinksNextPrev />}/>
                    <Route exact path={"/contact"} component={() => <Contact />}/>
                    <Route exact path={"/car/:category/"} component={CarCategory} />
                    <Route exact path={"/car/:category/:carname"} component={CarOnePageMain} />
                    <Route path="*" component={NotFound} />
                </Switch>
                <Footer />
                </HashRouter>
            </>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

在谷歌分析中，它只显示一个子页面，并且正好指向 index.html

更新

我找到了一个非常简单的解决这个问题的方法。 https://www.npmjs.com/package/react-router-ga

这就是我现在的代码：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../sass/main.scss';
import {
    HashRouter,
    Route,
    Switch,
} from 'react-router-dom';
import Analytics from 'react-router-ga';

class Index extends Component {

    render() {

        return (
            <>
                <HashRouter >
                    <Analytics id="UA-xxxxxxx-1" debug>
                    <ScrollUpButton ContainerClassName="AnyClassForContainer" />
                <Header />
                <Switch history={history}>
                    <Route exact path={"/"} component={() => <HomePage />}/>
                    <Route exact path={"/test"} component={() => <CategoryLinksNextPrev />}/>
                    <Route exact path={"/contact"} component={() => <Contact />}/>
                    <Route exact path={"/car/:category/"} component={CarCategory} />
                    <Route exact path={"/car/:category/:carname"} component={CarOnePageMain} />
                    <Route path="*" component={NotFound} />
                </Switch>
                <Footer />
                </Analytics>
                </HashRouter>
            </>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

标签： javascriptreactjsreact-nativegoogle-analyticsreact-router

javascript - HashRouter 和 Google Analytics 无法跟踪单个路径

问题描述

解决方案

推荐阅读