如何在ReactJs中重定向到另一个类组件/页
如何在ReactJs中重定向到另一个类组件/页
提问于 2019-11-26 10:24:27
如何在ReactJS中从一个类组件重定向到另一个类组件/新页面。
目前，我可以通过反应路由器中的链接标签加载新的组件.
但是，我想重定向到另一个类组件，就像HTML中的href一样，重定向到另一个新页面，在那里以前的状态是不可用的，它是一个新的类。
示例：-我有3页
- LandingPage
- LoginPage
- SignupPage
最初，LandingPage将被打开，然后当我单击相应的屏幕时，它将打开。如何从LoginPage加载一个新的SignupPage & LandingPage。SignupPage和LandingPage都有一个单独的类组件来管理特定屏幕的状态。请分享一些代码参考。
提前谢谢..。:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-26 11:27:44
如果您想从登陆页面打开登录或注册页面，只需调用history.push('/login')从登陆页面组件打开登录页面即可。历史在每条路线上都是可用的，因此可以直接调用。
index.js
import { BrowserRouter, Route,Switch} from 'react-router-dom';
import landingPage from './landingPage';
import login from './login';
import signup from './signup';
render(){
<BrowserRouter>
<Switch>
<Route exact={true} path="/" component={landingPage} />
<Route exact={true} path="/login" component={login} />
<Route exact={true} path="/signup" component={signup} />
</Switch>
</BrowserRouter>
}//登陆页组件
landingPage =()=>{
const openLoginPage= () => {
history.push('/login'); //this will open login page on click of login button
}
return(<div>
< button onClick={openLoginPage}>login</button >
</div>)
}Stack Overflow用户
发布于 2019-11-26 10:41:42
达到你的想法有帮助吗？我只是和大家分享一下使用react-router-dom在react中路由的想法
App.js
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import SignUp from "./signUp";
import Login from "./login";
import Landing from "./landing";
class App extends Component {
render() {
return (
<Router>
<div id="container">
<div>
<Link to="/">Landing</Link>
<Link to="/signup">Sign Up</Link>
<Link to="/login">Login</Link>
</div>
<Switch>
<Route exact path="/signup" component={SignUp} />
<Route exact path="/login" component={Login} />
<Route exact path="/" component={Landing} />
</Switch>
</div>
</Router>
);
}
}
export default App;您应该已经创建了功能组件/类组件，您可以相应地导入和使用
类组件的更新
一旦从一个组件路由到另一个组件，每个组件将使用自己的state和props加载。
我已经将类组件放在这里，您必须确保所有的App.js、landing.jsx、signUp.jsx和login.jsx都位于同一个文件夹位置。
landing.jsx
import React, { Component } from "react";
class Landing extends Component {
state={}
render() {
return (
<div>
<h1>Landing page</h1>
</div>
);
}
}
export default Landing;signUp.jsx
import React, { Component } from "react";
class SignUp extends Component {
state={}
render() {
return (
<div>
<h1>Sign Up page</h1>
</div>
);
}
}
export default SignUp;login.jsx
import React, { Component } from "react";
class Login extends Component {
state={}
render() {
return (
<div>
<h1>Login page</h1>
</div>
);
}
}
export default Login;另一种方法是使用push方法在类组件中单击按钮，在这两种情况下，路由都应该存在。
<button onClick={()=> this.props.history.push('/')} ></button>或
<button onClick={()=> this.props.history.push('/signup')} ></button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59048729
复制相关文章
相似问题
腾讯云开发者
