Source: https://datafa.st/docs/react-router Markdown source: https://datafa.st/docs/react-router.md Description: How to add DataFast to your React Router project # Add DataFast to your React Router project Follow these steps to integrate DataFast analytics into your React Router application. ## Add tracking script to root component The recommended way to add scripts to all pages in a React Router application is by adding it to your root component. 1. Open your project's root component (usually `App.jsx` or `main.jsx`). 2. Add the DataFast tracking script to the `` section: ```jsx import { useEffect } from 'react'; function App() { useEffect(() => { // Add DataFast script const script = document.createElement('script'); script.defer = true; script.setAttribute('data-website-id', 'dfid_******'); script.setAttribute('data-domain', 'your_domain.com'); script.src = 'https://datafa.st/js/script.js'; document.head.appendChild(script); // Cleanup on unmount return () => { document.head.removeChild(script); }; }, []); return ( // Your app content ); } ``` > Replace `dfid_******` with your actual Website ID from DataFast. > Replace `your_domain.com` with your website's root domain. ## Alternative: Using public/index.html You can also add the script directly to your `public/index.html` file: ```html ``` ## Verify installation After implementing either method: - Visit your live website - Check your [DataFast dashboard](/dashboard) for incoming data - It might take a few minutes for the first pageviews to appear > For advanced configuration options like localhost tracking, custom API endpoints, or cross-domain setup, see the [script configuration reference](/docs/script-configuration).