Ich implementieren eine einfache Anmeldung, die prüft, ob der Benutzer in der Liste enthalten ist, und wenn ja, legt sie den Benutzernamen in localStorage ab und leitet ihn dann gemäß console.log zu („/“) weiter. Dort heißt es, dass er umgeleitet wurde, aber das ist nicht der Fall eigentlich umleiten:

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;

Wie Sie sehen können, wird es gedruckt, verbleibt aber weiterhin 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;

Außerdem sollte ich sagen, dass ich auf der Website d3.js verwende, was auch den virtuellen Dom ändert, und ich mache hier und da Aktualisierungen, um Diagramme usw. zu aktualisieren. Ich denke, was passiert, ist, dass es umleitet, aber etwas mit dem Dom oder anderen Konflikten und dann neu laden? Ich weiß nicht, dass ich es nicht bieten kann Es gibt auch Codebeispiele:

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