Question

如何在ReactJS中从一个类组件重定向到另一个类组件/新页面。

目前，我能够通过React路由器中的链接标签加载新组件。
但是然后我想重定向到另一个类组件，就像将HTML中的href重定向到另一个新页面，其中以前的状态将不可用，并且它是一个新的新类。

示例：-

我有3页


LandingPage

LoginPage

SignupPage

最初，将打开LandingPage，此后，当我单击相应的屏幕时，它将打开。如何从 LandingPage 加载新的 LoginPage 和 SignupPage 。 SignupPage和LandingPage都具有单独的类组件，以管理该特定屏幕的状态。请分享一些代码参考。

预先感谢..：）

Answer 1

如果要从登录页面打开登录或注册页面，只需在登录页面组件中调用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>)
}

Answer 2

达到您的想法会有所帮助吗？我只是与您分享使用 react-router-dom

在反应中进行路由的想法

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>

如何在ReactJs中重定向到另一个类组件/页面

2 个答案: