如何在react js中的onclick事件上隐藏和显示路由器组件

用户11017939

我试图在 REACTJS 中的 onclick 事件上隐藏和显示路由器组件。但没有找到我可以做到的方法。帮我解决这个问题。这是我的代码-

import React from 'react';
import { BrowserRouter as Router,Route, Link, Switch} from 'react-router-dom';
import SignIn from './SignIn'

export default class Clicksigningin extends React.Component{

    render(){
        return(
            <div>
            <Router>
             <div>
             <Link to={'/SignIn'}><button className='btn btn-danger'>Sign In</button></Link>
             <Switch>
                 <Route exact path = '/SignIn' component = {SignIn} />
             </Switch>
             </div>
            </Router>
        </div>
    )
}

}

弗里尚克

更好的方法是摆脱这个特定组件的路由器。在单个组件（例如登录）中，您可以有一个按钮来切换（显示/隐藏）登录部分。

import React from 'react';
import { BrowserRouter as Router,Route, Link, Switch} from 'react-router-dom';
import SignIn from './SignIn'

export default class Clicksigningin extends React.Component{

constructor(props){
    super(props);
    this.state={showSignInPage:false}
}

toggleSignIn(){
    this.setState({showSignInPage:!this.state.showSignInPage});
}
render(){
    return(
        <div>
            {this.state.showSignInPage && <SignIn/>}
            <button className='btn btn-danger' onClick={()=>this.toggleSignIn()}>Sign In</button>

         </div>
        </Router>
    </div>
)
}

PS：代码我没有测试过。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。