Bien sûr, voici un message en anglais que vous pouvez utiliser pour demander de l'aide sur Discord ou d'autres communautés en ligne :

Title: Help with React Routing Issue on Vercel Deployment

Hello everyone,

I'm currently facing an issue with my React application deployed on Vercel, where direct navigation to certain URLs (like https://yellow-jack.fr/yellow-cash) results in a 404 error, even though navigation within the app via React Router links works fine.

Here's a brief overview of my setup:

Frontend: React with React Router for client-side routing.
Backend: Express server for API routes.
Deployment: Vercel, with a configuration to handle both the React frontend and the Node.js backend.
In my vercel.json, I have configured rewrites to direct /api/* requests to the Express server and all other routes to the React app's index.html. Despite this, direct URL access leads to a 404 error.

Here's my vercel.json configuration:

{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    },
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "dist" }
    }
  ],
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/server.js"
    },
    {
      "source": "/(.*)",
      "destination": "/dist/index.html"
    }
  ],
  "cleanUrls": true,
  "trailingSlash": false
}

I've checked my React Router configuration, and it seems correct. The routing works perfectly when running locally, but the issue arises only when deployed to Vercel.

I would greatly appreciate any insights or suggestions on what might be causing this issue and how to resolve it. Has anyone here faced a similar problem, or does anyone have experience with Vercel deployments that might help?

Thank you in advance for your time and help!