App works fine on local machine (says everyone), but the deployment doesn't work at all. I can NOT seem to figure out the problem. Any suggestions? I'll link the source and deployment below:
Demo: https://ploymahloy.github.io/ecommerce-material-ui/
Source: https://github.com/ploymahloy/ecommerce-material-ui
GitHub Pages does not support browser history like your browser does. In your case, the route https://ploymahloy.github.io/ecommerce-material-ui/ doesn't help GitHub Pages understand where to point the user (since it is a frontend route).
Solution 1
You need to use a Hash Router instead of a Browser Router in your application. This type of router uses the hash portion of the URL to keep the UI in sync with the URL.
// index.js
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
Solution 2
You can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html.
You can read more about both approaches here: https://create-react-app.dev/docs/deployment/#github-pages