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.
Tech D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.