如何在 ReactJs 中重定向到另一个 class component/Page

Question

如何在 ReactJS 中从一个 class 组件重定向到另一个 class component/fresh 页面。

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

Example:-

I have 3 Pages

LandingPage

LoginPage

SignupPage

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

提前致谢..:)

Answer 1

是否有助于实现您的想法？我只是与您分享使用 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;

您应该已经创建了您的功能组件/ class组件，您可以相应地导入和使用

class 组件的更新

一旦从一个组件路由到另一个组件，每个组件将加载自己的 state 和 props

我已经把我的 class 组件放在这里，你必须确保所有 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;

另一种方法是在 class 组件内点击按钮时使用 push 方法，在这两种情况下路由都应该存在

<button onClick={()=> this.props.history.push('/')} ></button>

或

<button onClick={()=> this.props.history.push('/signup')} ></button>

Answer 2

如果您想从登录页面打开登录或注册页面，只需从登录页面组件调用 history.push('/login') 即可打开登录页面。 history 在每条路由中都有，所以可以直接调用。

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>)
}

如何在 ReactJs 中重定向到另一个 class component/Page

How to redirect to another class component/Page in ReactJs

reactjs

navigation

react-router

react-router-dom

multi-page-application