after login, redirect to /boxes

src/components/Boxes.js

@@ -20,7 +20,7 @@ export default function Boxes({ token }) {
   }, [token]);
 
   // Log boxes state changes outside the useEffect
-useEffect(() => {
+  useEffect(() => {
     console.log('Boxes updated:', boxes);
   }, [boxes]); 
 

src/components/Login.js

@@ -2,11 +2,12 @@
 import React, { useState } from 'react';
 import { Button, TextField, Container, Typography } from '@mui/material';
 import axios from 'axios';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate
 
 export default function Login({ setToken }) {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
-
+  const navigate = useNavigate(); // Initialize useNavigate
   const handleLogin = async (e) => {
     e.preventDefault();
     try {
@@ -14,6 +15,7 @@ export default function Login({ setToken }) {
 
       const response = await axios.post(`${process.env.REACT_APP_API_URL}/login`, { username, password });
       setToken(response.data.token);  // Store the token in state or context
+      navigate('/boxes'); //redirect to /boxes after successful login
     } catch (error) {
       console.error('Login failed', error);
     }