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

Posted 2021-04-06

我试图隐藏并在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>
    )
}

}

答案

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

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：代码我还没有测试过。

另一答案

你可以这样做

import React from "react";
import ReactDOM from "react-dom";

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from "react-router-dom";

function SignIn() {
  return "hello";
}

class App extends React.Component {
  state = {
    current: ""
  };

  toggle = () => {
   
    this.setState({ current: this.state.current==''?"SignIn":"" })
      
  };

  render() {
    return (
      <Router>
        <div>
          {this.state.current == "SignIn" ? (
            <Redirect to="/SignIn" />
          ) : (
            <Redirect to="" />
          )}
          <button className="btn btn-danger" onClick={this.toggle}>
            Sign In
          </button>
          <Switch>
            <Route exact path="/SignIn" component={SignIn} />
          </Switch>
        </div>
      </Router>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

以上是关于如何在react js中的onclick事件上隐藏和显示路由器组件的主要内容，如果未能解决你的问题，请参考以下文章

React.js 中的 OnClick 事件绑定

React.js 中的 OnClick 事件绑定

onClick 事件隐藏数据集 Chart.js V2

如何在 ReactJS 中的事件上添加或删除类名？

js隐藏div

如何让 React 中的 onClick 处理具有多个兄弟姐妹的单个元素？