Question

我正在制作一个react应用，我创建了一个导航栏，它在所有组件中呈现，我只希望它在一个组件中可见，我做了一个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

我想您有一种确定用户是否已登录的方法。假设您已将信息存储在isLoggedIn变量中，那么如果用户未登录，则可以执行以下操作以隐藏导航，

{ isLoggedIn && <Navigation /> }

但是，一旦您的应用程序增长，我建议您根据公共/私有状态进行不同的路由。

创建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;

创建您的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;

现在，只需将这些文件添加到您的主文件中

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;

Answer 2

请勿为此使用HOC。

您必须将用户存储在loggedIn的某个地方，否则我建议您使用类似localStorage的

localStorage.setItem("loggedIn", true);

注意：要设置localStorage，您不需要任何其他配置。

在路由器中，您可以使用它来隐藏component，

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

如何隐藏导航栏，使其仅在用户登录后才可见？

2 个答案: