CODEWITHSUNDEEP
node.jsreactjsgoogle-analyticsreact-router
Oli C
Oli C

Reputation: 113

How to use Google Analytics in a ReactRouter V4 Switch setup

I am trying to implement Google Analytics in my React single page application but to do that I understand that I need to use the history prop. I am using a Switch setup, and this will not seem to work.

<Switch history={history}>
    <Route exact path="/" component={place}/>
    <Route path="/about" component={otherplace}/>
    <Route component={error}/>
</Switch>

If I change the <Switch> to a <Router> the analytics work but the error page renders on every page and when the URL path changes the page requires a refresh.

Upvotes: 0

Views: 74

Answers (1)

Asif vora
Asif vora

Reputation: 3347

The problem is that the error component is on all routes.

Try this: Add a distinct 404 error route:

<Route path='/404' component={error} />

Route all unmatched routes to it:

<Redirect from='*' to='/404' />

This should show the error component only on pages that don't exist.

Here's a switch that does that:

<Switch history={history}>
    <Route exact path="/" component={place}/>
    <Route path="/about" component={otherplace}/>
    <Route path='/404' component={error} />
    <Redirect from='*' to='/404' />
</Switch>

Upvotes: 1

Related Questions