Not Found Error in Remix

To handle Not Found errors in Remix, you have to create a Splat route that will match any route that doesn’t exist. To create one in Remix, you create a file app/routes/$.tsx.

Inside of that file, you create a loader, that throws error code 404 and export Error Boundary. Also, just in case, you should also return that error boundary.

Example

export function loader() {  
	throw new Response('Not Found', {status: 404})  
}  
  
export function ErrorBoundary() {  
	const location = useLocation()  
  
	return (  
		<GeneralErrorBoundary  
			statusHandlers={{  
				404: () => (  
					<div className="flex flex-col gap-6">  
						<div className="flex flex-col gap-3">  
							<h1>We can't find this page:</h1>  
							<pre className="text-body-lg whitespace-pre-wrap break-all">  
								{location.pathname}  
							</pre>  
						</div>  
						<Link to="/" className="text-body-md underline">  
							Back to home  
						</Link>  
					</div>  
				),  
			}}  
		/>  
	)  
}  
  
export default function NotFound() {  
	return <ErrorBoundary />  
}