Frequently Asked Questions

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans tailored to specific business needs. For full details, visit the Hygraph Pricing Page.

Features & Capabilities

What are the key features and capabilities of Hygraph?

Hygraph provides a GraphQL-native architecture, content federation, scalability, and rapid content delivery. It supports integrations with platforms like Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, and more. Hygraph also offers enterprise-grade security, SSO, audit logs, and sandbox environments. Learn more at the Hygraph Features Page.

Does Hygraph offer an API?

Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. For technical details, visit the Hygraph API Reference.

What integrations are available with Hygraph?

Hygraph integrates with a wide range of platforms, including Netlify, Vercel, BigCommerce, commercetools, Shopify, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic. For a full list, visit the Hygraph Integrations Page.

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation is available at Hygraph Documentation, covering setup, API usage, integrations, and deployment guides.

How does Hygraph optimize content delivery performance?

Hygraph is designed for rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized delivery reduces bounce rates and increases conversions. For more details, visit this page.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. These certifications ensure enterprise-grade security and data protection. For more details, visit the Hygraph Security Features Page.

How does Hygraph protect sensitive data?

Hygraph provides robust security features including SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to safeguard sensitive data and meet regulatory standards. More information is available at the Hygraph Security Features Page.

Use Cases & Benefits

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It serves modern software companies, enterprises seeking to modernize, and brands aiming to scale globally, improve development velocity, or re-platform from legacy solutions.

What business impact can customers expect from Hygraph?

Customers can expect significant time savings, streamlined workflows, faster speed-to-market, and enhanced customer experience through scalable and consistent content delivery. For example, Komax achieved 3X faster time to market, and Autoweb saw a 20% increase in website monetization. See more success stories on the Hygraph Product Page.

What industries are represented in Hygraph's case studies?

Hygraph's case studies span industries such as Food and Beverage (Dr. Oetker), Consumer Electronics (Samsung), Automotive (AutoWeb), Healthcare (Vision Healthcare), Travel and Hospitality (HolidayCheck), Media and Publishing, eCommerce, SaaS (Bellhop), Marketplace, Education Technology, and Wellness and Fitness. Explore more at the Hygraph Case Studies Page.

Can you share specific customer success stories using Hygraph?

Yes. Komax achieved 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement, and Dr. Oetker enhanced their digital experience using MACH architecture. More stories are available on the Hygraph Product Page.

How long does it take to implement Hygraph and how easy is it to start?

Hygraph is designed for quick implementation. For example, Top Villas launched a new project in just 2 months from initial contact. Users can get started rapidly by signing up for a free account and using onboarding guides and documentation. Learn more at Hygraph Documentation.

What pain points does Hygraph solve?

Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, global team conflicts, clunky content creation), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). For more details, visit the Hygraph Product Page.

How does Hygraph solve these pain points?

Hygraph empowers non-technical users with an intuitive interface, modernizes legacy tech stacks with GraphQL-native architecture, ensures consistent branding via content federation, and streamlines workflows to reduce costs and accelerate speed-to-market. It also simplifies development, query management, and schema evolution, and resolves cache and integration issues. See detailed solutions on the Hygraph Product Page.

What KPIs and metrics are associated with the pain points Hygraph solves?

Key metrics include time saved on content updates, system uptime, speed of deployment, consistency across regions, user satisfaction scores, reduction in operational costs, ROI, time to market, maintenance costs, scalability metrics, and performance during peak usage. For more, see the Hygraph Blog on CMS KPIs.

Support & Implementation

What customer support is available after purchasing Hygraph?

Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. For more, visit the Hygraph Contact Page.

What training and technical support does Hygraph provide for onboarding?

Hygraph provides onboarding sessions for enterprise customers, 24/7 support, training resources (video tutorials, documentation, webinars), and Customer Success Managers for expert guidance. More details are available at the Hygraph Contact Page.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph offers 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers receive dedicated onboarding and expert guidance, while all users can access documentation and the community Slack channel for additional help.

Product Information

What is the primary purpose of Hygraph?

Hygraph's primary purpose is to unify data and enable content federation, allowing businesses to create impactful digital experiences. Its GraphQL-native architecture removes traditional content management pain points and offers scalability, flexibility, and efficient data querying.

How easy is it to get started with Hygraph?

Getting started is simple—sign up for a free-forever account at Hygraph. Resources like documentation, video tutorials, and onboarding guides are available to help users navigate the platform.

What feedback have customers given about Hygraph's ease of use?

Customers praise Hygraph for its intuitive interface and ease of use, noting that even non-technical users can start using it right away. The user interface is described as logical and user-friendly, making it accessible for both technical and non-technical teams.

Who are some of Hygraph's customers?

Notable customers include Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more details and case studies, visit the Hygraph Case Studies Page.

Competition & Comparison

Why should a customer choose Hygraph over alternatives?

Hygraph stands out for its GraphQL-native architecture, content federation, scalability, and cost efficiency. It enables impactful digital experiences while reducing operational costs and improving efficiency. For more details, visit the Hygraph Product Page.

Blog & Content Modeling

Where can I find the Hygraph blog?

The Hygraph Blog provides the latest updates, developer tutorials, and essential guides to content modeling. Visit the Hygraph Blog for news and insights.

Who are the authors of the blog post 'Your complete guide to routing in React'?

The blog post was written by Aagam Vadecha and Joel Olawanle.

What does the blog post encourage readers to do?

The blog post encourages readers to sign up for the newsletter to stay informed about releases and industry news.

What kind of content can I find in the Hygraph Blog?

The Hygraph Blog includes developer tutorials, latest updates, and essential guides to content modeling.

Technical Requirements

What are the prerequisites for following the React routing guide?

You should have a fundamental understanding of HTML, CSS, JavaScript, some experience with React, Node and npm or yarn installed, and a React application set up using Create React App.

What libraries are used for routing in the React example?

The example uses the react-router-dom library for routing in React applications.

How is routing handled in the example app?

Routing is managed using react-router-dom, with routes defined for different components such as Home, About, and Products. Dynamic routing is implemented using URL parameters like slug.

What are the key components for routing in React?

The key components are Routes and Route.

What is dynamic routing in React?

Dynamic routing allows you to create different components for each item dynamically, using parameters like slug in the URL to fetch specific data.

How do you import components for routing in React?

Import components for routing by using import statements for each component you want to use in your routes, such as Home, About, and Products.

Where can I find more information about routing in React?

For more information, read the Routing in React blog post on the Hygraph website.

Webinar Event: How to Avoid Personalization Tech Traps

A complete guide to routing in React

Learn how to perform routing in React using React router, as well as the various aspects of routing and how React router handles them.
Aagam Vadecha

Last updated by Aagam 

Jul 19, 2024

Originally written by Joel

A complete guide to routing in React

React is an open-source frontend JavaScript framework that allows developers to create websites and user interfaces using UI components and single-page applications. Routing is one of the most important features we always want to implement when developing these applications.

Routing redirects users to different pages based on their actions or requests. In React routing, you'll use an external library called React router, which can be challenging to configure if you need help understanding how it works.

In this article, we will show you how to perform routing in React using a React router. Learn the various routing aspects and how React router handles them, such as dynamic routing, programmatic navigation, no-matching routes, etc.

#Getting started

To fully comprehend and follow this guide, we would create an application that properly illustrates all aspects of navigation with appropriate use cases. We would create/use a cocktails app that retrieves data from Hygraph via GraphQL. This application, which can be accessed via this live link, uses all aspects of routing covered in this guide.

cocktail app with routing in react

Editor's Note

Note: This guide only covers routing; however, the aspect of creating a schema on Hygraph and how we consumed the data will not be covered; notwithstanding, here is a link to the source code, and I have also included a picture of what the schema looks like in this article.

Prerequisite

You should have the following to follow along with this guide and code:

  • A fundamental understanding of HTML, CSS, and JavaScript
  • Some experience or knowledge of React
  • Node and npm or yarn installed on your machine
  • Set up a React Application using Create React App

#Adding React router to our app

How to install React router

As previously stated, React makes use of an external library to handle routing; however, before we can implement routing with that library, we must first install it in our project, which is accomplished by running the following command in your terminal (within your project directory):

npm install react-router-dom

After successfully installing the package, we can set up and configure the React router for our project.

How to setup React router

To configure React router, navigate to the index.js file, which is the root file, and import BrowserRouter from the react-router-dom package that we installed, wrapping it around our App component as follows:

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

#How to configure routes in React

We have now successfully installed and imported React router into our project; the next step is to use React router to implement routing. The first step is configuring all of our routes (all the pages/components we want to navigate).

We would first create those components, in our case, three pages: the Home page, the About Page, and the Products Page. This GitHub repository contains the content for these pages. Once those pages are properly configured, we can now set up and configure our routes in the App.js file, which serves as the foundation for our React application:

// App.js
import { Routes, Route } from 'react-router-dom';
import Home from './Pages/Home';
import About from './Pages/About';
import Products from './Pages/Products';
const App = () => {
return (
<>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products />} />
<Route path="/about" element={<About />} />
</Routes>
</>
);
};
export default App;

We can see in the above code that we imported Routes and Route components from react-router-dom and then used them to declare the routes we want. All Routes are wrapped in the Routes tag, and these Routes have two major properties:

  • path: As the name implies, this identifies the path we want users to take to reach the set component. When we set the path to /about, for example, when the user adds /about to the URL link, it navigates to that page.

  • element: This contains the component that we want the set path to load. This is simple to understand, but remember to import any components we are using here, or else an error will occur.

Editor's Note

We created a folder (Pages) to keep all page components separate from actual components.

When we go to our browser and try to navigate via the URL, it will load whatever content we have on such pages.

Adding a navigation bar

Let us now create a standard Navigation bar component that can be used to navigate inside our application.

First, create the Navbar component.

// component/NavBar.js
import { NavLink } from "react-router-dom";
const NavBar = () => {
return (
<nav>
<ul>
<li>
<NavLink to="/">Home</NavLink>
</li>
<li>
<NavLink to="/about">About</NavLink>
</li>
<li>
<NavLink to="/products">Products</NavLink>
</li>
</ul>
</nav>
);
};
export default NavBar;

The NavLink component from react-router-dom is a special component that helps you navigate different routes using the to prop. The NavLink component also knows whether the route is currently "active" and adds a default active class to the link. We can use this class in our CSS to define some styling for active links, as shown below:

// index.css
ul li a {
color: #000;
}
ul li a:hover {
color: #00a8ff;
}
ul li a.active {
color: #00a8ff;
}

Also, we can assign our custom classes instead of using the default active class. The NavLink component gives us access to properties like isActive, which can be used like this.

...
<li>
<NavLink
to="/"
className={({ isActive }) => {
return isActive ? "active-link" : "";
}}
>
Home
</NavLink>
</li>
...

Finally, let us use the Navbar component inside our App.

// App.js
import NavBar from "./Components/Navbar";
import { Routes, Route } from "react-router-dom";
const App = () => {
return (
<>
<NavBar />
<Routes>
...
</Routes>
</>
);
};
export default App;

How to fix No Routes Found Error

When routing, a situation may cause a user to access an unconfigured route or a route that does not exist; when this occurs, React does not display anything on the screen except a warning with the message "No routes matched location."

This can be fixed by configuring a new route to return a specific component when a user navigates to an unconfigured route as follows:

// App.js
import { Routes, Route } from 'react-router-dom';
import NoMatch from './Components/NoMatch';
const App = () => {
return (
<>
<Routes>
// ...
<Route path="*" element={<NoMatch />} />
</Routes>
</>
);
};
export default App;

In the preceding code, we created a route with the path * to get all non-configured paths and assign them to the attached component.

Editor's Note

We created a component called NoMatch.js, but you can name yours whatever you want to display 404, page not found, on the screen, so users know they are on the wrong page. We can also add a button that takes the user to another page or back, which leads us to programmatic navigation.

#How to navigate programmatically in React

Programmatic navigation is the process of navigating/redirecting a user as a result of an action on a route, such as a login or a signup action, order success, or when he clicks on a back button.

Let's first look at how we can redirect to a page when an action occurs, such as when a button is clicked. We accomplish this by adding an onClick event, but first, we must create the route in our App.js file. After that, we can import the useNavigate hook from the react-router-dom and use it to navigate programmatically as follows:

// Products.js
import { useNavigate } from 'react-router-dom';
const Products = () => {
const navigate = useNavigate();
return (
<div className="container">
<div className="title">
<h1>Order Product CockTails</h1>
</div>
<button className="btn" onClick={() => navigate('order-summary')}>
Place Order
</button>
</div>
);
};
export default Products;

Editor's Note

We already created a route with the path order-summary, so when this button is clicked, the user is automatically navigated to the orderSummary component attached to this route.
<button className="btn" onClick={() => navigate(-1)}>
Go Back
</button>

Ensure you already have the hook imported and instantiated as we did earlier else this won’t work.

#How to implement dynamic routing with React router

We created three files in our pages folder earlier to implement routing, one of which was the products component, which we will populate with Hygraph content. We created a schema in Hygraph to receive cocktail details, and this is how it looks:

your content model in hygraph

We then filled it in with cocktail specifics. We will now use GraphQL to retrieve these data so that we can consume them in our React project. This is how the products page appears:

// Products.js
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { getAllCocktails } from "../api";
import ProductCard from "../Components/ProductCard";
const Products = () => {
const [products, setProducts] = useState([]);
const navigate = useNavigate();
useEffect(() => {
const fetchProducts = async () => {
const { cocktails } = await getAllCocktails();
setProducts(cocktails);
};
fetchProducts();
}, []);
return (
<div className="container">
<button className="btn" onClick={() => navigate(-1)}>
Go Back
</button>
<div className="title">
<h1>CockTails</h1>
</div>
<div className="cocktails-container">
{products.map((product) => (
<ProductCard product={product} />
))}
</div>
</div>
);
};
export default Products;
// components/ProductCard.js
import { Link } from "react-router-dom";
const ProductCard = ({ product }) => {
if (!product) {
return null;
}
return (
<div key={product.id} className="cocktail-card">
<img src={product.image.url} alt="" className="cocktail-img" />
<div className="cocktail-info">
<div className="content-text">
<h2 className="cocktail-name">{product.name}</h2>
<span className="info">{product.info}</span>
</div>
<Link to={`/products/${product.slug}`}>
<div className="btn">View Details</div>
</Link>
</div>
</div>
);
};
export default ProductCard;

Editor's Note

You can learn more about React and Hygraph here.

We fetched our content from Hygraph in the preceding code; if you already created your own schema, you can simply change the Endpoint URL and possibly the schema name if you gave it a different name.

Editor's Note

We added a button on each cocktail card so that a user can click it to view more details about each cocktail, but this would be done dynamically because we can create different components for each cocktail, which would be stressful if we had more than 5 different cocktails. Dynamic routing comes into play here.

We added a Link and used string interpolation to dynamically attach the slug of each product to the path, so we can get the slug and use it to get the data to show.

Let us now put dynamic routing into action.

The first step would be to create the component that we want to render dynamically, and for that we would create a ProductDetials.js file where we would dynamically fetch details of each product based on the slug passed through the URL, but for now we can just place dummy data into the component like this:

// ProductDetails.js
const ProductDetails = () => {
return (
<div className="container">
<h1>Products Details Page</h1>
</div>
);
};
export default ProductDetails;

We can now proceed to create a route to handle dynamic routing in our App.js file this way:

// App.js
import { Routes, Route } from 'react-router-dom';
// ...
import ProductDetails from './Pages/ProductDetails';
const App = () => {
return (
<>
<Routes>
// ...
<Route path="/products/:slug" element={<ProductDetails />} />
</Routes>
</>
);
};
export default App;

Editor's Note

We used slug, which can be anything, but this route will match any value and display the component as long as the pattern is the same, for example, http://localhost:3000/products/cocktail will show the ProductDetails component.

So far, we've dealt with the first part of dynamic routing. We must now obtain the parameter passed through the URL in order to dynamically query the data for the specific cocktail. This will be accomplished through the use of urlParams.

How to use URL params to handle dynamic routing

We will import the useParams hook into the ProductDetails component so that we can use it to get the URL parameter and then use that parameter to query our data from Hygraph via GraphQL.

// ProductDetails.js
import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { getProductBySlug } from "../api";
const ProductDetails = () => {
const [product, setProduct] = useState([]);
const navigate = useNavigate();
// Fetch slug from route parameters
const { slug } = useParams();
useEffect(() => {
const fetchProduct = async () => {
const { cocktail } = await getProductBySlug(slug);
setProduct(cocktail);
};
fetchProduct();
}, [slug]);
return (
<div className="container">
// ...Product Details template
</div>
);
};
export default ProductDetails;

At this point, we have successfully been able to get the URL param passed, let’s now make use of this slug to fetch data from Hygraph using GraphQL:

At this point, we have successfully implemented dynamic routing.

#How to implement lazy loading with React router

We've already seen how to create routes and implement routing with React router; now let's look at how to lazy load routes with React router.

Lazy loading is a technique in which components that are not required on the home page are not loaded until a user navigates to that page, allowing our application to load faster than having to wait for the entire app to load at once. This contributes to improved performance, which leads to a positive user experience.

To implement lazy loading, simply go to App.js and wrap our routes with the Suspense component, along with a fallback props that are rendered on the screen until the component loads:

// App.js
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import NavBar from './Components/NavBar';
const Home = lazy(() => import('./Pages/Home'));
const About = lazy(() => import('./Pages/About'));
const Products = lazy(() => import('./Pages/Products'));
const ProductDetails = lazy(() => import('./Pages/ProductDetails'));
const NoMatch = lazy(() => import('./Components/NoMatch'));
const App = () => {
return (
<>
<NavBar />
<Suspense fallback={<div className="container">Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/products" element={<Products />} />
<Route path="/products/:slug" element={<ProductDetails />} />
<Route path="*" element={<NoMatch />} />
</Routes>
</Suspense>
</>
);
};
export default App;

Editor's Note

We wrapped the routes with the Suspense component, and it’s important for you to know that the fallback props can hold a component.

#Conclusion

We learned about routing and how to implement it in our React application in this guide. It is critical to understand that the React router is what allows us to perform single-page routing without reloading the application.

Try Hygraph for free

Build limitless solutions rapidly with our GraphQL-native API-first approach

Blog Authors

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.