Cómo ocultar la barra de navegación en la página de inicio de sesión en el enrutador de reacción

4 minutos de lectura

avatar de usuario
Jong Hyen Kim

Quiero ocultar la barra de navegación en una página de inicio de sesión.

De hecho, lo hice, pero no puedo ver la barra de navegación en otras páginas.

Este código es parte del archivo My App.jsx.

Hago historia en el estado de la aplicación. Y escondo la barra de navegación, cuando este nombre de ruta es “https://stackoverflow.com/” o ‘/login’.

¡Funciona!

Pero luego escribí el ID y la contraseña, hice clic en el botón de inicio de sesión, obtuve el resultado de ‘éxito’ y navegué a ‘/ principal’.

Ahora tampoco puedo ver la barra de navegación en el componente principal.

¿Cómo puedo hacer esto?

Lo siento por mi inglés corto. Si no puedes entender mi pregunta, puedes comentar.

constructor(props) {
  super(props);
  this.state = {
    isAlertOpen: false,
    history: createBrowserHistory(),
  };
  this.toggleAlert = this.toggleAlert.bind(this);
}

<BrowserRouter>
  <div className="App">
    {this.state.history.location.pathname === "https://stackoverflow.com/" || this.state.history.location.pathname === '/login' ? null
      : <Header toggleAlert={this.toggleAlert} />}
    <div className="container">
      {this.state.history.location.pathname === "https://stackoverflow.com/" || this.state.history.location.pathname === '/login' ? null
        : <Navbar />}
      <Route exact path="https://stackoverflow.com/" render={() => <Redirect to="/login" />} />
      <Route path="/login" component={Login} />
      <Route path="/main" component={Main} />
      <Route path="/user" component={User} />
      <Route path="/hw-setting" component={Setting} />
      <Route path="/hw-detail/:id" component={HwDetail} />
      <Route path="/gas-detail/:id" component={GasDetail} />
      {this.state.isAlertOpen ? <Alert /> : null}
    </div>
  </div>
</BrowserRouter>

login(event) {
  event.preventDefault();
  userService.login(this.state.id, this.state.password).subscribe(res => {
    if (res.result === 'success') {
      global.token = res.token;
      this.props.history.push('/main');
    } else {
      alert(`[ERROR CODE : ${res.statusCode}] ${res.msg}`);
    }
});

  • sospecho que history te estás instanciando a ti mismo no se mantiene sincronizado con el creado por react-router. Si desea acceder al historial, probablemente debería usar el con enrutador HOC

    – Mario F.

    14 de noviembre de 2017 a las 9:28

avatar de usuario
Shubham Khatri

Podrías estructurar tu Routes diferente para que el Login componente no tiene el Header Me gusta

<BrowserRouter>
  <Switch>
  <div className="App">
    <Route exact path="/(login)" component={LoginContainer}/>
    <Route component={DefaultContainer}/>

  </div>
  </Switch>
</BrowserRouter>

const LoginContainer = () => (
  <div className="container">
    <Route exact path="https://stackoverflow.com/" render={() => <Redirect to="/login" />} />
    <Route path="/login" component={Login} />
  </div>
)


 const DefaultContainer = () => (
    <div>
    <Header toggleAlert={this.toggleAlert} />
    <div className="container">
      <Navbar />
      <Route path="/main" component={Main} />
      <Route path="/user" component={User} />
      <Route path="/hw-setting" component={Setting} />
      <Route path="/hw-detail/:id" component={HwDetail} />
      <Route path="/gas-detail/:id" component={GasDetail} />
      {this.state.isAlertOpen ? <Alert /> : null}
    </div>
    </div>
 )

  • Gracias por tu respuesta. Lo cambio como lo hiciste tú. Pero navbar no te escondas

    – Jong Hyen Kim

    14 de noviembre de 2017 a las 9:37


  • Muchas gracias papilla. me salvaste la vida.

    – Jong Hyen Kim

    14 de noviembre de 2017 a las 9:56


  • Me alegro de haber ayudado

    – Shubham Jatri

    14 de noviembre de 2017 a las 9:57

  • Lo siento, olvidé aceptar tu respuesta. Gracias por tu respuesta de nuevo.

    – Jong Hyen Kim

    15 de noviembre de 2017 a las 5:04

  • ¿Cómo puedo agregar ninguna ruta de coincidencia en esto?

    – Pablo Saumay

    20 de mayo de 2020 a las 1:45

  • Muy simple y efectivo

    – Awais Usmani

    21 de enero de 2021 a las 6:26

  • En lugar de envolver en

    envolver en <> el nuevo código sería <>

    – Awais Usmani

    21 de enero de 2021 a las 6:39


  • muy sencillo gracias amigo

    – núcleo114

    15 mayo 2021 a las 15:32

  • Esto no funciona para mí. Puse los componentes que quería tener una barra de navegación en el div y los que no tenía fuera y no marcaron la diferencia.

    – Mohamed Ali

    12/08/2021 a las 20:30

  • Esto funciona perfectamente para mi. También usé React Fragment como lo sugirió @AwaisUsmani ¡Bien!

    – Timbokun

    4 de septiembre de 2021 a las 3:29

avatar de usuario
Aquel

Poner la Ruta con path="/" debajo de todas las demás rutas:

<Switch>
  <Route path="/login" component={Login} />
  <Route path="/" component={Home} />
</Switch>

Funcionará.

avatar de usuario
Fadilla Rezha

La respuesta aceptada tiene un problema si necesita agregar otra ruta predeterminada dentro del interruptor si ninguna otra ruta coincide, por ejemplo, página 404, página no encontrada.

Terminé usando CSS simple para ocultar la barra de navegación dentro de mi página de inicio de sesión.

class LoginPage extends React.Component<>{

   ...

   // Hide navigation bar in login page. Do it inside ComponentDidMount as we need to wait for navbar to render before hiding it.
   componentDidMount(){
      document.getElementById('navigation-bar')!.style.display = "none";
   }

   componentWillUnmount(){
      document.getElementById('navigation-bar')!.style.display = "flex";
   }

   render(){
      return(
          // your login/signup component here
          ...
      )
   }

}

avatar de usuario
Flavio Edú Mataqque

Estaba tratando de resolver este problema, lo que hice fue agregar un componente de casco, para instalarlo use: yarn add react-helmet –save.

import {Helmet} from 'react-helmet';
<Helmet>
   <script src="https://kit.fontawesome.com/.....js" crossorigin="anonymous"></script>
</Helmet>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad