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 ReactWeb 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: Pensuisan projek UI membolehkan saya bertukar antara projek melalui JWT yang diterima daripada percubaan log masuk melalui bahagian hadapan (sekali berjaya) Saya rasa satu-satunya keadaan yang perlu diuruskan ialah bar navigasi dan datanya, yang akan diberikan laluan yang relevan supaya hanya dengan projek/penggunaan

P粉334721359 · Answer

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 (
    
      {children}
    
  );
};

§ 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 (
    
      {/* Your app components */}
    
  );
}

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 (
    <>
      
        {/* Rest of your code */}
      
    
  );
}

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 Your component content;
}

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.