Implementing React Router and Real-Time User Monitoring in React Applications
[ contents ]
Single-page applications (SPAs), commonly built with React, require a robust routing mechanism to manage navigation between different views without reloading the entire page. This dynamic routing is essential for a seamless user experience.
This tutorial provides a comprehensive guide to implementing client-side routing in a React application using React Router, a popular library for this purpose. Additionally, it demonstrates how to integrate a real-user monitoring (RUM) tool, Sematext Experience, to gain insights into application performance and user behavior.
Prerequisites
Before you begin, ensure you have the following installed:
- Node.js (version 12.x.x or higher)
- A package manager such as npm, yarn, or npx
- Basic knowledge of JavaScript, ES6, and React
- A Sematext account (a trial version is sufficient)
Getting Started
Begin by creating a new React project using npx. Once the project is generated, navigate into the directory and install the react-router-dom library.
npx create-react-app react-router-demo
cd react-router-demo
yarn add react-router-dom
The React Router library (version 5) consists of three packages: react-router (the core), react-router-dom (for web applications), and react-router-native (for React Native). This tutorial uses react-router-dom.
To view the initial React application, run the development server:
yarn start
This will open the application at http://localhost:3000/.
Creating the First Route
To create a route, import Router and Route from react-router-dom in your src/App.js file.
import React from 'react';
import { Router, Route } from 'react-router-dom';
We will use the low-level Router component, which requires a history object to be passed manually. This object will also be used later for the monitoring tool.
import { createBrowserHistory as createHistory } from 'history';
const history = createHistory();
A Route component renders a specific UI component when its path prop matches the current URL.
function App() {
return (
<Router history={history}>
<Route path="/" component={Home} />
</Router>
);
}
Create a Home component in src/components/Home.js:
import React from 'react';
export default function Home() {
return (
<div>
<h1>Home Page</h1>
</div>
);
}
Import this component into App.js and view the result in your browser.
Adding a Second Route
Create another component, src/components/About.js, with similar content.
import React from 'react';
export default function About() {
return (
<div>
<h1>About</h1>
</div>
);
}
Add it as a new route in App.js:
import About from './components/About';
function App() {
return (
<Router history={history}>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
When you navigate to /about, you will notice that both components are rendered. This is because / matches both paths. To fix this, use the exact prop on the Home route to ensure it only matches the root path.
<Route path="/" exact component={Home} />
Using the Switch Component
The Switch component renders only the first Route that matches the current location. This is useful for handling exclusive routes and redirects. Wrap your routes inside a Switch.
import { Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}
Adding a Navigation Bar
To navigate between pages without a full browser refresh, React Router provides the NavLink component. Add a simple navigation menu in App.js.
import { Router, Route, Switch, NavLink } from 'react-router-dom';
function App() {
return (
<Router history={history}>
<nav style={{ margin: 10 }}>
<NavLink exact to="/" style={{ padding: 10 }}>
Home
</NavLink>
<NavLink to="/about" style={{ padding: 10 }}>
About
</NavLink>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}
This will render a navigation bar allowing you to switch between the Home and About pages.
Adding Route Parameters
Dynamic routes can be created using URL parameters like :id. This is useful for displaying detailed views of specific items, such as blog posts.
Create a new component src/components/Posts.js and define a static array of post data.
import React, { useState } from 'react';
import { Link, Route } from 'react-router-dom';
const POSTS = [
{ id: 1, title: 'Hello Blog World!' },
{ id: 2, title: 'My second post' },
{ id: 3, title: 'What is React Router?' }
];
Next, create a Child component that will render the details of a single post. It uses the match object prop, which contains information about how the route matched the URL, including URL parameters.
function Child({ match }) {
return (
<div>
<h3>ID: {match.params.id}</h3>
</div>
);
}
The main Posts component will render a list of post links. Each link will navigate to a dynamic route /posts/:id. A nested Route will render the Child component for the selected post.
export default function Posts() {
const [posts, setPosts] = useState(POSTS);
return (
<div className="posts">
<h1>Posts List</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<Link to={`/posts/${post.id}`}>{post.title}</Link>
</li>
))}
</ul>
<Route path="/posts/:id" component={Child} />
</div>
);
}
Finally, add the /posts route and a corresponding NavLink in App.js.
import Posts from './components/Posts';
function App() {
return (
<Router history={history}>
<nav style={{ margin: 10 }}>
<NavLink exact to="/" style={{ padding: 10 }}>Home</NavLink>
<NavLink to="/about" style={{ padding: 10 }}>About</NavLink>
<NavLink to="/posts" style={{ padding: 10 }}>Posts</NavLink>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/posts" component={Posts} />
</Switch>
</Router>
);
}
Navigating to /posts will display the list, and clicking a post will show its ID.
Real User Monitoring with Sematext
Integrating a monitoring tool can provide valuable insights into your application's performance and user experience. Sematext Experience allows you to track page load times, HTTP requests, UI interactions, and application crashes.
Configure a Sematext Monitoring App
Log in to your Sematext account, create a New App, and select Experience.
Enter a name for your app, select the "About Website" option for SPAs, and click "Continue".
Installing Monitoring Scripts
You will be provided with installation scripts. Add the first script to the <head> section of your public/index.html file. This script contains your unique application token.
<script type="text/javascript">
(function (e, r, n, t, s) {
// ... Sematext script content ...
})(window, document, 'script', '//cdn.sematext.com/rum.js', 'strum');
</script>
<script type="text/javascript">
strum('config', {
token: 'YOUR_TOKEN_HERE',
receiverUrl: 'https://rum-receiver.sematext.com'
});
</script>
Next, add the routeChange event listener to your src/App.js file, right after defining the history object. This is essential for SPAs as it tracks navigation events that don't involve a full page reload.
history.listen((location, action) => {
if (action !== 'REPLACE') {
window.strum('routeChange', window.location.href);
}
});
Testing the Monitoring Tool
Build your React application for production and serve it locally.
yarn build
npx serve -s build
Navigate through the different routes of your application. After a few moments, you will see performance data appear in your Sematext dashboard. The dashboard provides an overview of page load times, resource downloads, and user demographics.
Conclusion
Real-time user monitoring offers a significant advantage for SPAs, allowing you to identify performance bottlenecks and improve the user experience. Integrating tools like Sematext Experience with React Router provides a powerful combination for building and maintaining high-quality web applications.