React routes not working in my deployed application despite troubleshooting

Netlify site name:
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,
path: ‘catalog’,
path: ‘cart’,

Some of the many things I’ve tried:

  • Added a netlify.toml file to my root directory:
    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!

Partially correct. When using development mode (npm run dev) routes (and other features/functions) seem to work fine.

When using production (npm run build && npx serve -s dist routes (and other features/functions) do not work . This means there is an issue with your project and not with Netlify.

I suggest consulting Vite and React documentation (and potentially related forums) to determine why your project doesn’t work correctly when building for production.

1 Like

If you run the command provided by @dig, you’ll see it’s identical to what is displaying on Netlify:

1 Like

Sorry, I should have been more clear about it working in development mode vs production mode. Thanks for your help! I’ll focus my attention more towards the Vite/React side of things to slim down my research.

Thanks, Nathan! I didn’t realize I could preview production locally, so that will save me the step of redeploying to Netlify each time I try something different. :slight_smile: