Whether you’ve crafted a unique application from scratch or used a build tool, routing is a major feature to incorporate. It plays a central role in static HTML pages as well as in the most complex web applications. If a user needs to go from the login page to their unique home page, the application will route them to the new location and load the content. For our purposes, routing predominantly is a process of navigation for application resources. Once the application is built and tested locally, everything routes correctly, but then once in production you may notice that a simple refresh leads to a split second flash of a 404 error page, or even a failed GET request.

There is nothing wrong with how the application is mapped out. The error is part of the application searching for the user's requested component while your app is fully running on a production server. Basic routes should be checked on the server and make sure any redirects are properly handled so we can rule out broken URLs or URIs.

Even with all that, we may still encounter this issue for a fraction of a second while loading and search engines may be alerted to the brief 404 pageview or other metric. Thankfully, each framework or approach has an answer, and they either rely on the browser to maintain the user's place with location.hash or we build a loading mechanism into the project before returning a true 404 error, especially when refreshing the page.

Angular

The first thing we need is to import the two modules below from @angular/common in the app.module.ts file for example. In the same file add the additional line under Providers. The application should now be connected to the browser's hash location and will redirect accordingly during a refresh.

import { HashLocationStrategy, LocationStrategy } from '@angular/common'
 
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}]

This is the quickest approach to have the application properly route without signaling a 404 missing page error unless the component truly does not exist.

React

In this instance we will rely on two states and check on the routing process of your choice that we point to a component for missing content and if it is mounting our component or actually cannot find it based on the URL provided. First we import useEffect and useState from react and build a function that will check is a component is mounting. If it is in the process of loading we return a loading block, otherwise we return a true 404 error.

import React { useEffect, useState } from 'react'
 
const NotFound = () => {
const [isMount, setMount] = useState(false)
 
useEffect(() => {
setMount(true)
},[])
 
if (!isMount) {
return <div className='loading'></div>
}
 
return <div>The component does not exist.</div>
}
export default NotFound

No matter what framework is chosen to build an application, all frontend developers will encounter this routing situation when attempting to refresh a page or component. Depending on the hosting platform as well and if using a static page renderer, there may need to be more measures in place that each endpoint has an index file or the routing method captures the URIs and properly checks for a location to load the necessary component. A quick and simple solution would be working with traditional redirects. In the end, your search engine optimization will benefit from unnecessary 404 errors.