I have created a template named NotFound.jsx under component folder and written the below code.

import React from 'react';

const NotFound = () =>
  <div>
    <h3>404 page not found</h3>
    <p>We are sorry but the page you are looking for does not exist.</p>
  </div>

export default NotFound

In the App.js file have create the route as follow.

import NotFound from './component/NotFound';
<BrowserRouter>
<Route path="" component={NotFound} />
</BrowserRouter>

When i go to any working page it first renders that 404 template route and then it renders it's related template.

1) First it loads that 404 error page template: prnt.sc/ni4yzz 2) When a whole page loads completely then in the end the 404 template is attaching: prnt.sc/ni4zuu

So, what should be the correct way to handle 404 request. ?