대응 라우터에서 로그인 페이지의 탐색줄을 숨기는 방법

대응 라우터에서 로그인 페이지의 탐색줄을 숨기는 방법

로그인 페이지에서 검색대를 숨기고 싶다.

실제로 했는데 다른 페이지에서는 내비게이션이 안 보여.

이 코드는 My App.jsx 파일의 일부임.

앱의 주(州)에서 역사를 만들었어그리고 이 경로 이름이 '/' 또는 '/로그인'일 때 나는 탐색줄을 숨긴다.

됐다!

그런데 ID와 비밀번호를 입력하고 로그인 버튼을 클릭해 '성공' 결과를 얻고 '/main'으로 이동했다.

이제 메인 컴포넌트에도 내비게이션이 보이지 않는다.

어떻게 이럴 수가 있지?

나의 짧은 영어 실력은 미안해.내 질문을 이해할 수 없다면, 코멘트를 해도 된다.

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 === '/' || this.state.history.location.pathname === '/login' ? null
      : <Header toggleAlert={this.toggleAlert} />}
    <div className="container">
      {this.state.history.location.pathname === '/' || this.state.history.location.pathname === '/login' ? null
        : <Navbar />}
      <Route exact path="/" 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}`);
    }
});

당신은 당신의 구조를 만들 수 있다.Routes달리 말하자면Login구성 요소에 다음 구성 요소가 없음Header맘에 들다

<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="/" 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>
 )

가장 간단한 방법은 div 태그를 사용하고 navbar를 원하는 구성 요소를 배치하고 div 태그 외부에 로그인 경로 구성 요소를 배치하는 것이다.

<div className="App">
  <Router>

    <Switch>
      <Route exact path="/" component={Login} />
      <div>
        <NavBar />
   
        <Route exact path="/addproduct" component={Addproduct}></Route>
        <Route exact path="/products" component={Products}></Route>
     
      </div>

    </Switch>
  </Router>

</div>

Ract Router v6의 최신 릴리스에서는 더 이상 a를 전달할 수 없음<div>내부 구성 요소Routes (v6)아카Switch(v5 or lower)a를 주다Navbar. 당신은 다음과 같은 일을 해야 할 작업:

1. 두 개 만들기Layout구성 요소들하나는 단순히 Nav를 렌더링하고 다른 하나는 그렇지 않다.이름을 붙이면 어떨까?

• <WithNav />
• <WithoutNav />

2. 가져와야 할 것<Outlet />Ract 라우터와 렌더링 내부로부터Layout일치하는 경로에 대한 구성요소.

그렇다면 앱이나 어디서든Router당신은 아래와 같이 렌더링 할 것이다...

// WithNav.js (Stand-alone Functional Component)
import React from 'react';
import NavBar from 'your navbar location';
import { Outlet } from 'react-router';

export default () => {
  return (
    <>
      <NavBar />
      <Outlet />
    </>
  );
};


// WithoutNav.js (Stand-alone Functional Component)
import React from 'react';
import { Outlet } from 'react-router';

export default () => <Outlet />


// your router (Assuming this resides in your App.js)

      <Routes>
        <Route element={<WithoutNav />}>
          <Route path="/login" element={<LoginPage />} />
        </Route>
        <Route element={<WithNav />}>
          <Route path="/=example" element={<Example />} />
        </Route>
      </Routes>

LoginPage그러나 항해는 하지 않을 것이다.Example페이지 윌

경로 설정path="/"다른 모든 경로 아래:

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

그건 작동할 것이다.

나는 이 문제를 해결하려고 노력했다. 내가 한 것은 부품 헬멧을 추가해서 그것을 설치하는 것이었다. 실, reaction-helmet --save.

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

다른 경로(예: 404 페이지, 찾을 수 없는 페이지)가 일치하지 않을 경우 스위치 내에서 다른 기본 경로를 추가해야 하는 경우 승인된 답변에 문제가 있다.

나는 로그인 페이지 안에 탐색 표시줄을 숨기기 위해 간단한 css를 사용하게 되었다.

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
          ...
      )
   }

}

참조URL: https://stackoverflow.com/questions/47281850/how-to-hide-navbar-in-login-page-in-react-router