Pengurusan status bar navigasi

Question

Saya cuba menggunakan pengurusan negeri untuk mengubah suai aplikasi saya dan menjadikannya lebih serba boleh. Pada asasnya apl saya ialah apl web React dengan papan pemuka tablo yang dibenamkan dan saya perlu mengisi laluan tertentu (mengandungi papan pemuka tertentu) dalam apl dengan membaca json dari bahagian belakang yang menyatakan item yang kita mahu .

Saya memerlukannya dalam dua cara:

Penukaran projek UI membolehkan saya bertukar antara projek JWT diterima daripada percubaan log masuk melalui frontend (selepas berjaya) Saya rasa satu-satunya keadaan yang perlu diuruskan ialah bar navigasi dan datanya, yang akan memberikan laluan yang berkaitan dan dengan itu membolehkan papan pemuka yang berkaitan hanya oleh projek/pengguna.

Ini ialah kod untuk bar navigasi saya:

import React, { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { NavbarData } from "./NavbarData";
import { IconContext } from "react-icons";
import "./Navbar.css";
import Hamburger from "./Icons/Hamburger.svg";
import "./Icons/p_logo_color.png";
import Persona from "./Icons/Persona.svg";
import Logout from "./Icons/Logout.svg";
//someting





//Navbar function
function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const [pageName, setPageName] = useState('Operational Overview');
  const location = useLocation();
  

  

  const getPageTitleByUrl = (path) => {
    NavbarData.filter((navItem) => {
    
      if(navItem.path === path) {
        setPageName(navItem.title);
      }
     return true; 
    } )
    


  };

  const userConfigPageTitle = (path) => {
    setPageName("User Information");

  }

  

  useEffect(() => {
    if(location.pathname) {
      getPageTitleByUrl(location.pathname);
    }
  }, [location] ); 
  

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
          <Link to="#" className="menu-bars">
             <img src={Hamburger} alt="hamburger" onClick={showSidebar} />
          </Link>

          <div className="criminal-records">Elecciones Guatemala |</div> 
          <div className="pageTitle"><h1>{pageName}</h1></div>

          <>
          <div><img className="userIcon" src={Persona} alt="persona" /> </div>
          <div className="userButton">User123#</div>
          </>

          <Link to='/' className="logout-button">
          <div><img className="logoutIcon" src={Logout} alt="persona" /> </div>
          <div className="logoutButton">Logout</div> 
          </Link>
          
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
            <li className="navbar-toggle">
          
            </li>
            {NavbarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
        
                  <span className="navbutton-icon">{item.icon}</span><span className="navbutton-text" >{item.title}</span>
                    
                    
                  </Link>
                  
                </li>
                
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

Ini NavbarData:

import React from 'react'



import startpageIcon from './Icons/startpage.svg';
import performance from './Icons/performance.svg';
import bars from './Icons/bars.svg';
import simulation from './Icons/simulation.svg';
import fraud from './Icons/fraud.svg';
import deployForNow from './Icons/Profiles.svg';
import Planning from './Icons/plan.svg';
import deployment from './Icons/layer1.svg';
import barswithperson from './Icons/barswithperson.svg'





export const NavbarData = [
    {
        title: 'Simulación',
        path: '/monitoringoverview',
        icon: <img  src={simulation} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Empadronados",
        path: "/performancequality",
        icon: <img src={barswithperson} alt="" />,
        cName: 'nav-text'
    }


]

Jadi pada asasnya apa yang saya perlukan ialah menyambungkan penukar lungsur turun untuk menukar data berstruktur json di dalam NavbarData dan mentakrifkan setiap perubahan ini sebagai keadaan. Oleh itu, oleh kerana ini adalah tugas pengurusan negeri yang sangat mudah, saya ingin menyelesaikannya menggunakan Konteks Reaksi, bagaimana saya melakukannya?

Terima kasih terlebih dahulu!

Answer 1

Gunakan Konteks Reaksi untuk mengawal status bar navigasi:

§ Untuk menentukan konteks dan keadaan awalnya, buat fail bernama NavbarContext.js.

import React, { createContext, useState } from "react";

export const NavbarContext = createContext();

export const NavbarProvider = ({ children }) => {
  const [navbarData, setNavbarData] = useState([]);

  return (
    <NavbarContext.Provider value={{ navbarData, setNavbarData }}>
      {children}
    </NavbarContext.Provider>
  );
};

§ Gunakan komponen NavbarProvider untuk mengelilingi apl anda atau kawasan sasaran dalam apl anda, ini harus dilakukan dalam fail utama anda (iaitu App.js).

import { NavbarProvider } from "./NavbarContext";

function App() {
  return (
    <NavbarProvider>
      {/* Your app components */}
    </NavbarProvider>
  );
}

export default App;

§ Menggunakan konteks untuk memanipulasi keadaan, anda boleh mengubah suai komponen bar navigasi dengan sewajarnya.

import React, { useContext, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { IconContext } from "react-icons";
import { NavbarContext } from "./NavbarContext";
import "./Navbar.css";

function Navbar() {
  const { navbarData, setNavbarData } = useContext(NavbarContext);
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const [pageName, setPageName] = useState("Operational Overview");
  const location = useLocation();

  const getPageTitleByUrl = (path) => {
    navbarData.forEach((navItem) => {
      if (navItem.path === path) {
        setPageName(navItem.title);
      }
    });
  };

  useEffect(() => {
    if (location.pathname) {
      getPageTitleByUrl(location.pathname);
    }
  }, [location, navbarData]);

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        {/* Rest of your code */}
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

§ Apabila menerima data JSON untuk navbar (biasanya selepas log masuk), anda boleh mengemas kini keadaan navbarData menggunakan fungsi setNavbarData dalam konteks.

import { useContext, useEffect } from "react";
import { NavbarContext } from "./NavbarContext";

function YourComponent() {
  const { setNavbarData } = useContext(NavbarContext);

  useEffect(() => {
    // Fetch your JSON data from the backend
    const fetchData = async () => {
      try {
        const response = await fetch("/api/navbarData");
        const data = await response.json();
        setNavbarData(data); // Update the navbarData state with the fetched data
      } catch (error) {
        console.log("Error fetching data:", error);
      }
    };

    fetchData();
  }, [setNavbarData]);

  return <div>Your component content</div>;
}

export default YourComponent;

Mengemas kini keadaan navbarData menggunakan setNavbarData kini menyebabkan komponen navbar dipaparkan semula, akhirnya menyebabkan data yang dikemas kini dipaparkan dalam navbar.

React Router memerlukan persediaan yang betul dan kebergantungan yang betul mesti diimport ke dalam kod anda. Buat nota untuk mengesahkan bahawa langkah-langkah ini telah selesai.