1

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

目前，我可以通过 react-router 中的链接标签加载新组件。
但是然后我想重定向到另一个类组件，就像 HTML 中的 href 到另一个新页面，以前的状态将不可用，它是一个全新的类。

示例：-

我有 3 页

  1. 登陆页面
  2. 登录页面
  3. 注册页面

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

提前致谢.. ：）

4

2 回答 2

1

它有助于实现您的想法吗？我只是分享你在反应中使用路由的想法react-router-dom

应用程序.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 都在同一个文件夹位置

登陆.jsx

import React, { Component } from "react";

class Landing extends Component {
state={}
  render() {
    return (
      <div>
        <h1>Landing page</h1>
      </div>
    );
  }
}

export default Landing;

注册.jsx

import React, { Component } from "react";

class SignUp extends Component {
state={}
  render() {
    return (
      <div>
        <h1>Sign Up page</h1>
      </div>
    );
  }
}

export default SignUp;

登录.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>
于 2019-11-26T10:41:42.403 回答
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>)
}
于 2019-11-26T11:27:44.427 回答