I'm implementing a basic login that checks if the user is in the list and if so it puts the username into localStorage and then redirects to ("/") according to console.log it says it got Redirect, but not actually redirect:

import { useNavigate } from 'react-router-dom'; function Login({ fakeData }) { const [username, setUsername] = useState(''); const navigate = useNavigate(); const handleSubmit = async (event) => { event.preventDefault(); console.log('Submitting login form'); console.log('Username: ' + username); // Check if user with entered username exists const userExists = fakeData.users.find((user) => user.username === username); if (userExists) { console.log('User exists. Redirecting to /'); localStorage.setItem('loggedInUser', username); // Set username in localStorage navigate('/'); } else { // Clear username setUsername(''); console.log('User does not exist.'); // Handle invalid username case (display error message, etc.) } }; return ( 
 
 
 
  Username:   setUsername(event.target.value)} /> 
 
  Login  
 
 
 
 ); } export default Login;

As you can see it is printed but it still remains in /login

import React from 'react'; import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom'; import Dashboard from "./components/Dashboard"; import DifficultyComparison from "./components/comparisons/DifficultyComparison"; import RestrictionComparison from "./components/comparisons/RestrictionComparison"; import EnvironmentComparison from "./components/comparisons/EnvironmentComparison"; import CurrentContributionComparison from "./components/comparisons/CurrentContributionComparison"; import AllowsMeToComparison from "./components/comparisons/AllowsMeToComparison"; import SustainableDevelopmentComparison from "./components/comparisons/SustainableDevelopmentComparison"; import 'bootstrap/dist/css/bootstrap.min.css'; import {useState} from "react"; import Login from "./components/Login"; const App = () => { const [fakeData, setFakeData] = useState({ //Unnecessarly Long js object }); const [selectedOption1, setSelectedOption1] = useState('Max Mustermann'); const [selectedOption2, setSelectedOption2] = useState('Challenge'); const [selectedOption3, setSelectedOption3] = useState([]); const loggedInUser = localStorage.getItem('loggedInUser'); return (   {!loggedInUser && }/>} }/>  ) : (  ) } />  ) : (  ) } />  ) : (  ) } />  ) : (  ) } />  ) : (  ) } />  ) : (  ) } />  ) : (  ) } />   ); }; export default App;

Should also say that in the website I do use d3.js which also changes the virtual dom and I do refreshes here and there to update charts etc so I think what is happening is that it redirects but a bit Conflict with dom or other and then reload? I don't know I can't provide There are also code examples:

import * as d3 from 'd3'; function CommitmentsBar({ data, width, height, fakeData, selectedOption1, selectedOption2, selectedOption3, setSelectedOption1, setSelectedOption2, setSelectedOption3 }) { let eingeloeste = []; const cId = fakeData.commitments.filter(commitment => commitment.commitmentname === selectedOption2)[0].commitmentid; if (cId >= 0) { const cId = fakeData.commitments.filter(commitment => commitment.commitmentname === selectedOption2)[0].commitmentid; selectedOption3.map(option => { const groupOfUsers = fakeData.groups.filter(group => group.groupname === option)[0].users; const diariesFromCiD = fakeData.diary.filter(diary => diary.commitmentid === cId); const selectedDiaries = diariesFromCiD.filter(diary => groupOfUsers.includes(diary.userid)); const eingeloest = selectedDiaries.map(diary => diary.eingeloest); const sum = eingeloest.reduce((a, b) => a + b, 0); const avg = sum / groupOfUsers.length || 0; eingeloeste.push(avg); return avg; }); } data = eingeloeste.length > 0 ? eingeloeste : []; const groups = selectedOption3 const colors = ["#85B3B7"]; const svgRef = useRef(); useEffect(() => { const svg = d3.select(svgRef.current) .attr("width", width) .attr("height", height) .style('overflow', 'visible'); const xScale = d3.scaleBand() .domain(data.map((value, index) => index)) .range([0, width]) .padding(0.5); const yScale = d3.scaleLinear() .domain([0, 28]) .range([height, 0]); const xAxis = d3.axisBottom(xScale) .tickFormat((value, index) => groups[index]) .tickSize(0); const yAxis = d3.axisLeft(yScale) .ticks(6) .tickValues([5, 10, 15, 20, 25, 28]); svg.selectAll('g').remove(); svg.append('g') .call(xAxis) .attr('transform', `translate(0, ${height})`) .selectAll('text') .style('font-size', '16px'); svg.append('g') .call(yAxis) .selectAll('text') .style('fill', 'black') .style('font-size', '16px'); const horizontalLines = d3.axisLeft(yScale) .ticks(5) .tickSize(-width) .tickFormat('') .tickSizeOuter(0); svg.append('g') .call(horizontalLines) .attr('class', 'horizontal-lines') .selectAll('.tick line') .attr('stroke', 'lightgrey') .attr('stroke-width', 1) .attr('stroke-dasharray', '4 4'); const group = svg.selectAll('.group') .data(data) .join('g') .attr('class', 'group'); group.append('rect') .attr('class', 'bar') .attr('x', (value, index) => xScale(index)) .attr('y', yScale) .attr('width', xScale.bandwidth()) .attr('height', value => height - yScale(value)) .attr('fill', '#85B3B7'); group.each(function (d, i) { if (i % 4 === 3) { // Append a line and text to every 4th group const groupIndex = Math.floor(i / 4); d3.select(this) .append('line') .attr('class', 'line') .attr('x1', xScale(i) + xScale.bandwidth() / 2 + 15) .attr('y1', yScale(28)) .attr('x2', xScale(i) + xScale.bandwidth() / 2 + 15) .attr('y2', yScale(28) - 30) .attr('stroke', 'grey') .attr('stroke-width', 1); d3.select(this) .append('text') .attr('class', 'group-label') .attr('x', xScale(i) + xScale.bandwidth() / 2 + 15) .attr('y', yScale(28) - 35) .text(`Klasse ${groupIndex + 1}`) .style('font-size', '12px') .style('text-anchor', 'middle'); } }); const legendWidth = 80 * colors.length; const legend = svg.append('g') .attr('transform', `translate(${(width - legendWidth) / 2}, ${height - 20})`); legend.selectAll('.legend-item') .data(colors) .join('g') .attr('class', 'legend-item') .attr('transform', (value, index) => `translate(${index * 80}, 0)`) .call(g => { g.append('rect') .attr('x', 0) .attr('y', -height) .attr('width', 15) .attr('height', 15) .attr('fill', value => value); g.append('text') .attr('x', 20) .attr('y', -height + 13) .text(`Eingelöste Commitments`) }); }, [data, groups, height, width, selectedOption3]); return