Question

我有标头组件，还有2个页面和一个登录页面。使用_app.js覆盖了app.js，这样我就可以在所有页面中都有标头。我有2个问题：-

1）登录页面中出现页眉。我不知道如何将其隐藏在_app.js中。

2）在_app.js加载中，我必须检查本地存储以识别用户是否已经登录（如果没有登录，则必须重定向到登录页面）。

对于2个问题，我可以做的一件事是在登录组件中检查onComponenDidMount（）方法中的本地存储，并基于本地存储重定向页面。

layout.js

class Layout extends Component {
    render() {
        const { children } = this.props
        return (
            <div className='layout'>
                <Header />
                {children}
            </div>
        );
    }
}

_app.js

export default class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props
        return (
                <Layout>
                    <Component {...pageProps} />
                </Layout>
        )
    }
}

signin.js

class Signin extends Component {
 handleSubmit = e => {
        e.preventDefault();
        if(users.username ===document.getElementById('username').value && users.password=== document.getElementById('password').value){
            localStorage['username']=users.username;  
            Router.push({ pathname: '/appUser' });                
                message.success('Login SuccessFull');            
        }else {
            message.error('Wrong Email and Password');
        }
      };

    render(){
        return(
            <div className="form-container">
                <div className="form-content">


               <Form onSubmit={ this.handleSubmit} className="form"  onSubmit={this.handleSubmit}>
                   <div className="logo-section">                            
                       <img src="../../static/images/logo.png" ></img>                            
                       <div >
                           <h3 className="bold">Homelife</h3><h3>Care</h3>
                       </div>
                   </div>
                   <Form.Item>
                        <Input id="username" placeholder="User name" />
                    </Form.Item>
                    <Form.Item >
                        <Input.Password id="password" placeholder="password"/>
                    </Form.Item>
                    <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
                        <Button type="primary" htmlType="submit" >
                             SIGN IN
                        </Button>
                    </Form.Item>
                </Form>
                </div>
            </div>
        )
    }
}

Please help

Answer 1

我已经完成了..我正在监听路由器事件，并基于此显示标题和

class Layout extends Component {
    constructor(props){
        super(props);
        console.log(props);
        this.state={
            showHeader:false,
            loading:true
        }    
        this.routeChangeHandler=this.routeChangeHandler.bind(this);
    }
    componentDidMount(){
        Router.events.on('routeChangeComplete',this.routeChangeHandler);

    }
    routeChangeHandler(url){
        console.log(url);
        if(url==='/signin'){
            this.setState({showHeader : false});
        } else{
            this.setState({showHeader:true});
        }

    }
    render() {
        const { children } = this.props
        return (
            <div className='layout'>
                 {this.state.showHeader ? 
                <Header />: ''}
                {children}
            </div>
        );
    }
}

检查本地存储是否用户已登录_app.js

_app.js

 componentDidMount(){

        if(constlocalStorage.getLocalStorage()){
            Router.push({pathname:'/appUser'});
        } else{
            Router.push({pathname:'/signin'});
        }


 }

Answer 2

如果任何人都面临着功能组件的相同问题。这可能会有所帮助。我已经从next / router使用过userRouter（）访问router.pathname =>，它提供当前路径，因此即使我们刷新页面，它也能正常工作，不仅是像@Krazy解决方案中那样更改路由时只需这些行即可。

    const router = useRouter();
    const showHeader = router.pathname === '/login' ? false : true;
    //and render header like this 
return ( 
    {showHeader && <Header />}
<Component {...pageProps} />

)

如何在nextjs的登录页面中隐藏导航栏标题

2 个答案: