Как я могу скрыть свою навигационную панель на главной странице и сделать ее видимой только после входа пользователя?

Question

Я создаю приложение реакции, я сделал навигационную панель, и она рендерится во всех компонентах, и я хочу, чтобы она была видна только в одном, я сделал функцию HOC, но она все еще не работает правильно.

Компоненты высшего порядка

это мой компонент навигации

import React from 'react';
import {NavLink} from "react-router-dom";

const Navigation = () => {
    return (
        <div id = "navlinks">
            <NavLink to = "">PROMOS</NavLink>
            <NavLink to = "" >Nueva Orden</NavLink>
            <NavLink to = "" >Ordenes</NavLink>
            <NavLink to = "">Menú</NavLink>
            <NavLink id = "logout" to = "/" >Cerrar Sesión</NavLink>
        </div>
    )
}

export default Navigation;

, а это мой маршрутизатор

import React, { Component } from 'react';
import { BrowserRouter , Route} from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import Menu from "./components/Menu";
import Navigation from "./components/Navigation";


class App extends Component { 
  render() {
    return (
     <BrowserRouter>
   <div>
   <Navigation/> 
     <div>
      <Route path= "/"  component = {Home} exact /> 
     <Route path= "/Menu"  component = {Menu}/>
     </div>




   </div>
     </BrowserRouter>
    );

} 
}

export default App;

и мой компонент HOC

import React, { Component } from 'react';

const LoaderHOC = (WrappedComponent) => {
    return class LoaderHOC extends Component{
      render(){
          this.props.Navigation.length === 0 ? <div className = 'Loader'></div> : <WrapperComponent {... this.props}/>
      }
    }
}

export default LoaderHOC;

Answer 1

Не используйте HOC для этого.

Вы должны хранить где-то, что пользователь loggedIn, в противном случае я бы предложил вам использовать localStorage как,

localStorage.setItem("loggedIn", true);

Примечание: Для настройки localStorage вам не требуется дополнительная настройка.

В вашем роутере вы можете использовать это, чтобы скрыть ваши component,

{localStorage.getItem("loggedIn") && <Navigation/>}

Answer 2

Полагаю, у вас есть способ определить, вошел ли ваш пользователь в систему или нет. Предположим, вы сохранили информацию в переменной isLoggedIn, после чего вы можете сделать следующее, чтобы скрыть навигацию, если пользователь не вошел в систему,

{ isLoggedIn && <Navigation /> }

Но как только ваше приложение расширится, я предлагаю вам сделать разные маршруты в зависимости от публичного / частного состояния.

1. Создать файл PrivateRoute.js

import React, { Component } from 'react';
import { Redirect, Route } from 'react-router-dom';
import Navigation from "./components/Navigation";

class PrivateRoute extends Component {

  render() {
    // use your own logic here
    const isLoggedIn = !!localStorage.getItem('token');
    if (!isLoggedIn) {
      return <Redirect to='/' />;
    }
    return (
      <div>
        <Navigation />
          // your private route
      </div>

  }
}

export default PrivateRoute;

2. создайте файл PublicRoute.js

import React, { Component } from 'react';
import { Redirect, Route } from 'react-router-dom';

class PublicRoute extends Component {

    render() {
       <div>
          // your all public route
      </div>

    }
}

export default PublicRoute;

3. Теперь просто включите их в свой основной файл

import React, { Component } from 'react';
import { BrowserRouter , Route} from "react-router-dom";
import { PublicRoute, PrivateRoute } from './routes';
import './App.css';
import Home from "./components/Home";
import Menu from "./components/Menu";



class App extends Component { 
  render() {
    return (
     <BrowserRouter>
        <div>
          <PublicRoute />
          <PrivateRoute />
         </div>
     </BrowserRouter>
    );

} 
}
export default App;