I am making a task manager react application the application runs fine on the development side but when i build the application for production and run the application it shows “Unexpected Application Error! 404 Not Found”. I’ve checked the network tab all the files are correctly present and all the static files are also present correctly please help me how to fix this. I have used Vite to build this project

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import {
  createBrowserRouter,
  createHashRouter,
  RouterProvider,
} from "react-router-dom";
import Login from './pages/Loginpage.jsx'
const router = createHashRouter([
  {
    path: "/",
    element: <Login/>,
  },
  {
    path:"/home",
    element:<App/>
  }
]);
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

App.jsx

import './App.css'
import Taskbar from './components/Taskbar'
import { useState,useEffect } from 'react'
function App() {
  const [tasks,setTasks] = useState([])
  const [taskName, setTaskName] = useState('')
  
  useEffect(() => {
    // Fetch tasks from localStorage when the component mounts
    const savedTasks = JSON.parse(localStorage.getItem('tasks') || '[]');
    setTasks(savedTasks);
  }, []);

  const addTask = ()=>{
    if(taskName.trim()!==''){
    localStorage.setItem('tasks',JSON.stringify([...tasks,{id:tasks.length+1,name:taskName}]))
    setTasks([...tasks,{id:tasks.length+1,name:taskName}])
    setTaskName('')
    }
    
  }

  const deleteTask = (taskId)=>{
    const updatedTasks = tasks.filter(task => task.id !== taskId);
    setTasks(updatedTasks)
    const updatedTasksJSON = JSON.stringify(updatedTasks);
    localStorage.setItem('tasks', updatedTasksJSON);
  }

  const editTask = (taskId) => {
    const newTaskName = prompt('Enter the new task name: ');
    if (newTaskName !== null) {
        const updatedTasks = tasks.map(task => {
            if (task.id === taskId) {
                return { ...task, name: newTaskName };
            }
            return task;
        });
        localStorage.setItem('tasks', JSON.stringify(updatedTasks));
        setTasks(updatedTasks);
    }
};


  //another way to edit task just poiniting to
  // const editTask =(taskId)=>{
  //   const newTaskName = prompt('Enter the new task name: ')
  //   let arr = tasks.slice();
  //   if(newTaskName!== null){
  //       for(let i=0;i<tasks.length;i++){
  //         if(arr[i].id === taskId){
  //             arr[i].name = newTaskName;
  //             break;
  //         }
  //       }
  //   }
  //   setTasks(arr)
  // }
  const handleChange = (event)=>{
    setTaskName(event.target.value)
  }
  
  return (
    <>
      
      <div className="main">
      <h2 className='heading'>Task Manager</h2>
        <div className="input-container">
          <input type="text" value={taskName}  placeholder='Enter your task here..' id='task-field' onChange = {handleChange}/>
          <button type="button" id='addbtn' onClick={addTask} className='btn btn-outline-success'>Add</button>
        </div>
        <div className="task-container">
          {
            tasks.map((task)=>{
              return <Taskbar key = {task.id} taskId= {task.id} taskname ={task.name} deleteTask={deleteTask} editTask = {editTask}/>
            })
          }
        </div>
      </div>
    </>
  )
}

export default App

Loginpage.jsx

import React from 'react'
import './Loginpage.css'
const Loginpage = () => {
  return (
    <div className='form-container'>
    <form>
  <div className="form-group">
    <label htmlFor="exampleInputEmail1">Email address</label>
    <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
  </div>
  <div className="form-group">
    <label htmlFor="exampleInputPassword1">Password</label>
    <input type="password" className="form-control" id="exampleInputPassword1" placeholder="Password" />
  </div>
  <br />
  <button type="submit" className="btn btn-primary">Submit</button>
</form>
    </div>
  )
}

export default Loginpage

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todolist</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Briem+Hand:[email protected]&display=swap');
    </style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

I have tried createHashRouter but it still doesn’t work when i use this did not work properly in the development server also.