reactjs - 如何在反应js中的onclick事件上隐藏和显示路由器组件
问题描述
我正在尝试在 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 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);
推荐阅读
- google-cloud-platform - DataBricks + Kedro 与 GCP + Kubeflow 与服务器 + Kedro + Airflow
- webpack - Webpack 相对 url(../images/example.png) 不适用于 node_modules 包
- java - 字符串生成器替换字符串中偶数索引处的元素
- spring-boot - 无法创建 Firestore Bean,BeanCreationException。java.lang.NoClassDefFoundError: com/google/api/gax/rpc/TransportChannelProvider
- ajax - 在 SelectOnemenu 上重置 JSF Primefaces 输入值
- nuxt.js - Vuex 整个状态分配
- c# - Botframework v4 在瀑布对话流之外恢复对话
- python - Pandas汇总价格并计算价格与数量数据的权重/权重,并按5个价格分组
- php - Foreach 循环仅在 api 中显示数组中的最后一项
- c# - 在 C# 中将 base64 图像与字符串分离的最佳方法