Question

我一直在寻找一些关于如何使用react-router-dom或其他方式隐藏登录和注册导航的方法，我发现的所有内容都是复杂的代码和非常旧的帖子，他们对我没有帮助。我要问的是，是否可以隐藏导航栏仅用于登录＆amp;注册页面或者我应该将导航栏放在每个组件中我认为没有意义。

我试图像How to hide navbar in login or signup page reactn router这篇文章那样做，但我为this.props.location

获取了未定义的结果

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';


import Login from './login';
import signup from './signup';
import Home from './dashboard/index';
import NavBar from './navbar';

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            isNavbarHidden: false
        };
    }
    render() {
        return (
            <div>
                <NavBar/>
                <Router>
                        <Switch>
                            <Route path="/login" component={Login} />
                            <Route path="/signup" component={signup} />
                            <Route path="/home" component={Home} />
                        </Switch>
                </Router>
            </div>
        )
    }
}
export default App;

Answer 1

根据<NavBar />州显示isNavBarHidden：

render() {
    return (
        <div>
            { (this.state.isNavBarHidden) ? null : <NavBar /> }
            <Router>
                    <Switch>
                        <Route path="/login" component={Login} />
                        <Route path="/signup" component={signup} />
                        <Route path="/home" component={Home} />
                    </Switch>
            </Router>
        </div>
    )
}

然后在加载Login组件时将其设置为true。

Answer 2

我无法使用已接受的解决方案，因为我找不到设置状态以检测我是否在登录页面中的好方法。我不能使用useLocation挂钩从将路由器放入树的同一组件中检测登录页面。

以下是我最终完成此操作的方式。安装登录组件后，我仅使用CSS隐藏navbar元素。

<mat-select name="name" id="name" ngModel>// <--
            <mat-option value="NAME_01">NAME 01</mat-option>
            <mat-option value="NAME_02">NAME 02</mat-option>
            <mat-option value="NAME_03">NAME 03</mat-option>
        </mat-select>

Answer 3

在您的所有组件上，先生声明您的导航栏组件，除了您不希望导航栏显示的组件，然后在您的 App.js 中，您可以声明应用程序的路由，而无需在路由之外调用 NavBar 组件。你也可以使用 Css 来通过 props 隐藏它

如何在登录和隐藏中隐藏NavBar注册？

3 个答案: