La navigation React useNavigate ("/") ne fonctionne pas correctement (+d3.js)
P粉071743732
P粉071743732 2023-09-12 20:44:05
0
1
663

J'implémente une connexion de base qui vérifie si l'utilisateur est dans la liste et si c'est le cas, il place le nom d'utilisateur dans localStorage puis le redirige vers ("/") selon console.log, il indique qu'il a été redirigé, mais ce n'est pas le cas. rediriger en fait :

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 (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
            <div style={{ padding: '1rem', border: '1px solid black', borderRadius: '8px', width: '300px' }}>
                <form onSubmit={handleSubmit}>
                    <div style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center' }}>
                        <label htmlFor="username" style={{ marginRight: '0.5rem' }}>
                            Username:
                        </label>
                        <input
                            type="text"
                            id="username"
                            value={username}
                            onChange={(event) => setUsername(event.target.value)}
                        />
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                        <button type="submit" className="btn btn-primary">
                            Login
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}

export default Login;

Comme vous pouvez le voir, il est imprimé mais il reste toujours dans /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 (
        <Router>
            <Routes>
                {!loggedInUser && <Route path="/*" element={<Navigate to="/login"/>}/>}
                <Route path="/login" element={<Login fakeData={fakeData}/>}/>
                <Route
                    path="/"
                    element={
                        loggedInUser ? (
                            <Dashboard
                                fakeData={fakeData}
                                selectedOption1={selectedOption1}
                                setSelectedOption1={setSelectedOption1}
                                selectedOption2={selectedOption2}
                                setSelectedOption2={setSelectedOption2}
                                selectedOption3={selectedOption3}
                                setSelectedOption3={setSelectedOption3}
                            />
                        ) : (
                            <Navigate to="/login"/>
                        )
                    }
                />
                <Route
                    path="/difficulty"
                    element={
                        loggedInUser ? (
                            <DifficultyComparison
                                fakeData={fakeData}
                                selectedOption1={selectedOption1}
                                setSelectedOption1={setSelectedOption1}
                                selectedOption2={selectedOption2}
                                setSelectedOption2={setSelectedOption2}
                                selectedOption3={selectedOption3}
                                setSelectedOption3={setSelectedOption3}
                            />
                        ) : (
                            <Navigate to="/login"/>
                        )
                    }
                />
                <Route
                    path="/restriction"
                    element={
                        loggedInUser ? (
                            <RestrictionComparison
                                fakeData={fakeData}
                                selectedOption1={selectedOption1}
                                setSelectedOption1={setSelectedOption1}
                                selectedOption2={selectedOption2}
                                setSelectedOption2={setSelectedOption2}
                                selectedOption3={selectedOption3}
                                setSelectedOption3={setSelectedOption3}
                            />
                        ) : (
                            <Navigate to="/login"/>
                        )
                    }
                />
                <Route
                    path="/environment"
                    element={
                        loggedInUser ? (
                            <EnvironmentComparison
                                fakeData={fakeData}
                                selectedOption1={selectedOption1}
                                setSelectedOption1={setSelectedOption1}
                                selectedOption2={selectedOption2}
                                setSelectedOption2={setSelectedOption2}
                                selectedOption3={selectedOption3}
                                setSelectedOption3={setSelectedOption3}
                            />
                        ) : (
                            <Navigate to="/login"/>
                        )
                    }
                />
                <Route
                    path="/currentcontribution"
                    element={
                        loggedInUser ? (
                            <CurrentContributionComparison
                                fakeData={fakeData}
                                selectedOption1={selectedOption1}
                                setSelectedOption1={setSelectedOption1}
                                selectedOption2={selectedOption2}
                                setSelectedOption2={setSelectedOption2}
                                selectedOption3={selectedOption3}
                                setSelectedOption3={setSelectedOption3}
                            />
                        ) : (
                            <Navigate to="/login"/>
                        )
                    }
                />
                <Route
                    path="/allowsmeto"
                    element={
                        loggedInUser ? (
                            <AllowsMeToComparison
                                fakeData={fakeData}
                                selectedOption1={selectedOption1}
                                setSelectedOption1={setSelectedOption1}
                                selectedOption2={selectedOption2}
                                setSelectedOption2={setSelectedOption2}
                                selectedOption3={selectedOption3}
                                setSelectedOption3={setSelectedOption3}
                            />
                        ) : (
                            <Navigate to="/login"/>
                        )
                    }
                />
                <Route
                    path="/sustainabledevelopment"
                    element={
                        loggedInUser ? (
                            <SustainableDevelopmentComparison
                                fakeData={fakeData}
                                selectedOption1={selectedOption1}
                                setSelectedOption1={setSelectedOption1}
                                selectedOption2={selectedOption2}
                                setSelectedOption2={setSelectedOption2}
                                selectedOption3={selectedOption3}
                                setSelectedOption3={setSelectedOption3}
                            />
                        ) : (
                            <Navigate to="/login"/>
                        )
                    }
                />
            </Routes>
        </Router>
    );
};

export default App;

Je dois également dire que sur le site Web, j'utilise d3.js qui modifie également le dom virtuel et je fais des actualisations ici et là pour mettre à jour les graphiques, etc. donc je pense que ce qui se passe, c'est qu'il redirige mais quelque peu avec le dom ou d'autres conflits et puis recharger ? Je ne sais pas, je ne peux pas fournir Il existe également des exemples de code :

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 <svg ref={svgRef}/>;
}

export default CommitmentsBar;


P粉071743732
P粉071743732

répondre à tous(1)
P粉170438285
const handleSubmit = (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 /');
        navigate('/');
        window.location.reload();
        localStorage.setItem('loggedInUser', username); // Set username in localStorage

    } else {
        // Clear username
        setUsername('');
        console.log('User does not exist.');
        // Handle invalid username case (display error message, etc.)
    }
};

Ajout du rechargement une fois la navigation terminée

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal