Note: We now offer a simple SPA integration for React apps running Mouseflow


In this tutorial we are working with react-router 

You will want to have the BrowserRouter component wrapping your entire application like so


import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'

import Root from './Root'

        <Root />

Listening for route changes

You can use hooks to listen for route changes


import React, { useEffect } from 'react'
import App from './components/App'

import { useHistory } from 'react-router-dom'

const Root = () => {
    const history = useHistory()

    useEffect(() => {
        return history.listen((location) => {
            console.log(`You changed the page to: ${location.pathname}`)

    return (
        <App />

Talking to the Mouseflow API

Mouseflow uses an array _mfq in the browser to pass various meta-data to the Mouseflow server. One of the things Mouseflow looks for in this array is new page views. Now that we are listening to the new page views on our React app, we can simply push a key-value pair into this array each time the route changes. This virtually makes Mouseflow recognize new page views.

useEffect(() => {
    return history.listen((location) => {
        window._mfq.push(['newPageView', location.pathname]);
}, [history])

Congratulations, your React application should now be submitting all pageviews to Mouseflow as would any traditional HTML website.