I'd like to start by noting that I have already taken the troubleshooting steps to resolve errors 403 and 404 which are commonly associated with this problem in other threads all over stack overflow. These include setting CloudFront error pages to redirect to /index.html on both errors 403 and 404. I have also attempted using a Lambda@Edge function to rewrite the URL.
The issue I'm having is my react page, which uses react router, is being served correctly from aws when I navigate to the root. But when I try to navigate directly to child routes, nothing seems to render. However, when I serve up the same production build on my local machine it's fine.
Here is the public link for reference
Notice if you navigate directly to the link there is no issue. But then if you navigate to https://d1e06h60n3f04n.cloudfront.net/preview/assetId nothing renders. The code for the preview page is as follows:
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { BlogPreview } from './BlogPreview';
export interface IBlogPostData {
title: string;
content: string;
}
export function BlogPreviewForm() {
console.log("Loading blog preview form");
var { postId } = useParams();
const [blogPostData, setBlogPostData] = useState<IBlogPostData>({ title: "", content: "" });
useEffect(() => {
async function loadPost() {
var fileContent = await fetch(`previews/${postId}`);
setBlogPostData(await fileContent.json());
}
loadPost();
}, []);
return (
<div>
<div>Blog Preview</div>
<BlogPreview title={blogPostData?.title} content={blogPostData?.content} />
<label>Api Key</label>
<input type="text"></input>
<button>SUBMIT</button>
</div>
);
}
and that page is supposed to fetch the asset from assetId and load it.
My index html:
import ReactDOM from 'react-dom/client';
import './index.css';
import { AppRoutes } from './Routes';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const routes = createBrowserRouter(AppRoutes);
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<RouterProvider router={routes} />
</React.StrictMode>
);
reportWebVitals();
and my Routes definition:
export const AppRoutes: RouteObject[] = [
{
element: <App />,
path: '/',
children: [{
path: 'preview',
children: [{
path: '/preview/:postId',
element: < BlogPreviewForm />
}]
}]
}
]
I am pretty certain this has to do with CloudFront and S3 since it renders fine locally, so I'm not sure how much posting the relevant code will help which is why I've linked to a URL.
S3 config for reference:
