如何在 React 路由器的登录页面中隐藏导航栏

Question

我想在登录页面隐藏导航栏。

我确实做了，但是我看不到其他页面的导航栏

此代码是我的 App.jsx 文件的一部分。

我在 App 的状态下创造了历史。当此路径名为“/”或“/login”时，我会隐藏导航栏。

有效！

但随后我输入了 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}`);
    }
});

Answer 1

您可以以不同的方式构建您的

Routes

，这样

Login

组件就没有

Header

Like

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

Answer 2

从 React Router v6 的最新版本开始，不再可能在

<div>

又名

Routes (v6)

中传递

Switch(v5 or lower)

组件来渲染

Navbar

。你需要做这样的事情：

1. 创建两个

   Layout

   组件。一个简单地呈现 Nav 而另一个不呈现。假设我们给它们命名

• <WithNav />

• <WithoutNav />

2. 您需要从 React 路由器导入

   <Outlet />

   并在

   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

页面会有

Answer 3

最简单的方法是使用 div 标签并将组件放在您想要导航栏的位置，并将登录路由组件放在 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>

Answer 4

将带有

path="/"

的路线放在其他所有路线的下方：

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

它会起作用的。

Answer 5

我试图解决这个问题，我所做的是添加组件头盔，安装它使用：yarn add react-helmet --save.

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

Answer 6

与 Ash 的 React router v6 相同的想法，但没有创建两个新组件。

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          element={
            <>
              <Navbar />
              <Outlet />
            </>
          }
        >
          <Route path="/" element={<Home />}></Route>
          <Route path="/products" element={<Products />}></Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Answer 7

如果没有其他路由匹配，如果您需要在交换机中添加其他默认路由，则接受的答案有问题，例如，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
          ...
      )
   }

}