Как отправить значения для изменения NavBar с React

Question

Итак, у меня есть NavBar, который я пытаюсь изменить, основываясь на определенных событиях, Navbar изменяется так, как он есть у меня сейчас, но я не хочу отображать его в каждом классе, который загружает новую страницу. Раньше у меня был рендеринг NavBar внутри моего приложения. js, так было на всех страницах, но потом я не мог понять, как передать значения для правильного изменения NavBar. Я бы предпочел не передавать одинаковые переменные каждому классу, который загружает новую страницу. Как я могу решить эту проблему?

Вот мой код NavBar

import React from 'react';
import '../App.css';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';


export default function NavBar(props){

    const logged = props.logged;
    const baseTabs = props.baseTabs;
    console.log('log' +logged )
    console.log('base' + baseTabs)


    return (
        <nav>
            <Link style={{color: 'white', textDecoration: 'none'}} to='/'>
                <h3>Aura Flows</h3>
            </Link>

            <ul className='nav-links'>

            {baseTabs && <Link style={{color: 'white', textDecoration: 'none'}} to='/faq'> <li>FAQ</li> </Link> }

            {baseTabs && <Link style={{color: 'white', textDecoration: 'none'}} to='/pricing'> <li>Pricing</li> </Link> }

            {!logged && <Link style={{color: 'white', textDecoration: 'none'}} to='/login'> <li>Login</li> </Link> }

            {!logged && <Link style={{color: 'white', textDecoration: 'none'}} to='/signup'> <li>Sign Up</li> </Link> }

            {logged && <Link style={{color: 'white', textDecoration: 'none'}} to='/logout'> <li>Logout</li> </Link> }

            </ul>

        </nav>
    );
}

NavBar.propTypes = {
    logged: PropTypes.bool.isRequired,
    baseTabs: PropTypes.bool.isRequired
}

Один класс, который меняет Navbar на основе значений

import React, {Component, useState} from 'react';
import { Redirect } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { auth } from "../Components/firebase";
import '../App.css';
import '../css/SignUp.css';
import NavBar from '../Components/NavBar';


function SignUpPage(){
  const [logged, setLogged] = useState(false);
  const [baseTabs, setBaseTabs] = useState(true);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const signup = event =>{
    // Doesnt let fields be cleared allows viewing of json info in console
    event.preventDefault();
    console.log("Sign Up function");
    console.log(username + password)
    auth.createUserWithEmailAndPassword(username, password).then(cred => {
      // console.log(cred.user)
    })
    setBaseTabs(true);
    // sessionStorage.setItem('logged', true);
    setLogged(true);
  }


  if(logged === true){
        return (<Redirect to='/home'/>)
  }


  return (
    <div>
      <NavBar logged={logged} baseTabs={baseTabs}/>
      <form className='signUpBox' id='signup-form'>
        <h1>Sign Up</h1>
        <input type='text' name='username' placeholder='Username' onChange={ e => {setUsername(e.target.value)}} required/>
        <input type='password' name='password' placeholder='Password' onChange={ e => {setPassword(e.target.value)}} required/>
        <input type='password' name='confirmPassword' placeholder='Confirm Password' onChange={ e => {setConfirmPassword(e.target.value)}} required/>
        <input type='submit' name='' value='Sign Up' onClick={signup}/>
      </form>
    </div>    
  );
}

Answer 1

Вы можете использовать Концепцию управления состоянием из ловушки useContext или использовать избыточность для управления состоянием. Это видео на YouTube решает ту же проблему, что и у вас. пожалуйста, посмотрите это видео ссылка на видео

Answer 2

Используйте управление состоянием, вот библиотека, очень простая в использовании.

1. npm i shared-reducer-hooks
2. Создать магазин

// src/redux/appStatus.js
import SharedReducer from 'shared-reducer-hooks';

const initialState = {
  logged: false,
  showBaseTabs: false
};
const [mapState, dispatch] = SharedReducer((state = initialState, action) => {
  switch(action.type) {
    case 'login':
      return { ...state, logged: true };
    case 'toggleBaseTabs':
      return { ...state, showBaseTabs: action.showBaseTabs };
    default:
      return state;
  }
});

export const useLogged = mapState((state) => state.logged);
export const useShowBaseTabs = mapState((state) => state.showBaseTabs);

export const loginAction = () => dispatch({ type: 'login' });
export const toggleBaseTabsAction = (showBaseTabs) => dispatch({ type: 'toggleBaseTabs', showBaseTabs });

Использовать в NavBar

// NavBar
import { useLogged, useShowBaseTabs } from '../redux/appStatus';

export default function NavBar() {
  const logged = useLogged();
  const showBaseTabs = useShowBaseTabs();
  //...
}

Использовать в SignUpPage

// ...
import { useLogged, loginAction, toggleBaseTabsAction } from '../redux/appStatus';


function SignUpPage() {
    //...
    const logged = useLogged();

    const signup = event => {
    // Doesnt let fields be cleared allows viewing of json info in console
    event.preventDefault();
    console.log("Sign Up function");
    console.log(username + password)
    auth.createUserWithEmailAndPassword(username, password).then(cred => {
      // console.log(cred.user)
      loginAction(true);
      toggleBaseTabsAction(true);
    })
  }

  if (logged) {
    return <Redirect to="/home" />;
  }

  return (
    <div>
      <NavBar />
      // ...
    </div>
  );
}

Надеюсь, это будет полезно!

Answer 3

Вы можете использовать Context API в React, если ваше приложение не будет большим и не требует большого управления глобальным состоянием.

Если оно требует большого количества глобального управления состоянием, вы можете go для Redux.