ReactJS Static Site, and External redirects

1

I setup a Static Site to deploy my React app. Deploy worked and most of the functionality of the app is okey. However I have a catch-all redirect that allows non-existent URLs to redirect to the root “/”. For example a user visiting a non-existent route like “/asdsa” will redirect to “/”. This works when testing locally but it returns errors with a 404 on the hosted site in Render.

Do static sites allow external redirects? Below is a snippet of the external redirect component I wrote :

// ./src/components/ExternalRedirect.tsx
import { useEffect } from 'react';
 
const ExternalRedirect = ({ url }) => {
  useEffect(() => {
    window.location.href = url;
  }, [url]);
  return null;
};
        
export default ExternalRedirect;
2

Well looks like I should have read more documentation (and answered my own question): on Render for client side routing you can redirect all routing requests to your index.html using Redirect/Rewrite rules that you set on the Dashboard for your static site:

Since we cannot post links in this forum, the answer can be found in the docs if you navigate to Quickstarts → Create React App and searching for “Using Client-Side Routing”

3
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.