Saya sedang melaksanakan log masuk asas yang menyemak sama ada pengguna berada dalam senarai dan jika ya ia meletakkan nama pengguna ke dalam localStorage dan kemudian mengubah hala ke ("/") mengikut console.log ia mengatakan ia telah diubah hala , tetapi tidak sebenarnya ubah hala:

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;

Seperti yang anda lihat ia dicetak tetapi masih kekal dalam /log masuk

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;

Juga harus mengatakan bahawa dalam laman web saya menggunakan d3.js yang juga mengubah dom maya dan saya menyegarkan di sana sini untuk mengemas kini carta dan lain-lain jadi saya fikir apa yang berlaku ialah ia mengubah hala tetapi agak dengan dom atau konflik lain dan kemudian muat semula? Saya tidak tahu saya tidak dapat menyediakan Terdapat juga contoh kod:

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