Как скрыть компонент навигационной панели в reactjs по защищенному маршруту - PullRequest
Новая
       10

Как скрыть компонент навигационной панели в reactjs по защищенному маршруту

1 голос
/ 27 февраля 2020

Привет! Я создал защищенный маршрут и передаю navbar в качестве родительского компонента. Затем я передаю дочерние компоненты в защищенном маршруте. Я хочу скрыть панель навигации в каком-либо компоненте для какого-либо действия

Вот мой защищенный.рутер. js код 

import React from "react";
import { Route, Redirect } from "react-router-dom";
import Navbar from './component/Layouts/Navbar';


export const ProtectedRoute = ({
  component: Component,
  ...rest
}) => {
  return (
    <Route
      {...rest}
      render={props => {
        if (localStorage.getItem("loggedAsli") === "1") {
          return <div>  <Navbar/>
        <Component {...props} /> </div>;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/login",
                state: {
                  from: props.location
                }
              }}
            />
          );
        }
      }}
    />
  );
};

И это мое приложение. js код 

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import { ProtectedRoute } from "./protected.route";

import Learn from "./component/Learn/Learn";

class App extends React.Component {
  constructor(props) {
    super();
    this.updateUserLoginSetting = this.updateUserLoginSetting.bind(this);
    this.state = {
      userId: "",
      instituteId: ""
    };
  }

  updateUserLoginSetting = (userId, instituteId) => {
    this.setState({ userId: userId, instituteId: instituteId });
  };

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Route render={props => <Login />} exact path="/login" />

          <ProtectedRoute exact path="/Learn" component={Learn} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Как я могу скрыть navbar в компоненте обучения

Пожалуйста, помогите мне. есть ли обработка глобального состояния

1 Ответ

1 голос
/ 27 февраля 2020

Вы можете просто пропустить опору (например, showNav) и использовать ее внутри ProtectedRoute

export const ProtectedRoute = ({
  component: Component,
  showNav = true, // added showNav prop
  ...rest
}) => {
  return (
    <Route
      {...rest}
      render={props => { //               check if should showNav
        if (localStorage.getItem("loggedAsli") === "1" && showNav) {
          return <div>  <Navbar/>
        <Component {...props} /> </div>;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/login",
                state: {
                  from: props.location
                }
              }}
            />
          );
        }
      }}
    />
  );
};

И передать false, когда она Learn

//         pass showNav as false to hide nav bar
<ProtectedRoute showNav={false} exact path="/Learn" component={Learn} />
...