Netlify site name: https://flo-shopping-cart.netlify.app
Github repo: GitHub - gwolanski/shopping-cart
I’ve created a mock shopping application that works as it should when I run it locally, but it is not rendering any of my main content/routes in my deployed site. On load, my header and footer components display, but the main content area is blank. When I click on the navigation links on the top of the page to navigate to my other routes, I get a 404 error. In my index.html file on the deployed site, the main content area is empty, so something isn’t working right with my routes.
My routes are as follows:
const routes = [
{
path: ‘/’,
element: ,
errorElement: ,
children: [
{
index: true,
element:
},
{
path: ‘catalog’,
element:
},
{
path: ‘cart’,
element:
},
]
},
];
Some of the many things I’ve tried:
-
Added a netlify.toml file to my root directory:
[[redirects]]
from = “/*”
to = “/index.html”
status = 200 -
Added a _redirects file in my public directory:
/* /index.html 200 -
Attempted using HashRouter instead of BrowserRouter.
-
Changed the path to one of my routes so there wasn’t mixed cases (from shoppingCart to cart).
-
Changed some of my deploy/build settings on Netlify.
-
Compared the code and files of similar projects to my own to see if I was missing something (others with similar code and structure seem to work).
-
…the list goes on.
I’ve been stuck on this for a couple weeks and haven’t solved the problem, so am hoping someone can help guide me in the right direction before I lose my mind. If there is any additional information or context that I can provide, please let me know!
