Single Page Apps

In Single Page Applications (SPAs), navigating between pages doesn't trigger a full page reload. This means the Userback widget won't automatically detect URL changes and you need to manually call Userback.refresh() whenever the route changes in your app.

How to integrate

    import { useEffect } from 'react';
    import { useLocation } from 'react-router-dom';

    function App() {
      const location = useLocation();

      useEffect(() => {
        Userback.refresh();
      }, [location.pathname]);

      return <YourRoutes />;
    }

Place this component in your root layout — it will automatically call Userback.refresh() on every route change.

    'use client';

    import { useEffect } from 'react';
    import { usePathname } from 'next/navigation';

    export default function UserbackRefresh() {
      const pathname = usePathname();

      useEffect(() => {
        Userback.refresh();
      }, [pathname]);

      return null;
    }

    import { useEffect } from 'react';
    import { useRouter } from 'next/router';

    const MyApp = ({ Component, pageProps }) => {
      const router = useRouter();

      useEffect(() => {
        Userback.refresh();
      }, [router.asPath]);

      return <Component {...pageProps} />;
    };

    export default MyApp;

    import { watch } from 'vue';
    import { useRoute } from 'vue-router';

    export default {
      setup() {
        const route = useRoute();

        watch(() => route.path, () => {
          Userback.refresh();
        });
      }
    };

You can also call Userback.refresh() when dynamic content loads without a route change — for example, when switching tabs or loading a modal with different content.

Need help? Visit the Help Center or use the chat bubble on this page to contact our support team.