How to redirect to another class component/Page in ReactJs

Question

How to redirect from one class component to another class component/fresh page in ReactJS.

Currently, I am able to load new components through the link tags in react-router.
but then I want to redirect to another class component just like href in HTML to another fresh page where the previous states will not be available and it's a fresh new class.

Example:-

I have 3 Pages

1. LandingPage
2. LoginPage
3. SignupPage

Initially, LandingPage will be opened and after that when I click the respective screen it will open. How can i load a fresh LoginPage & SignupPage from LandingPage. Both SignupPage and LandingPage have a separate class component to manage the state of that particular screens. Please share some code references.

Thanks in advance.. :)

Answer 1

If you want to open login or signup page from landing page you can simply call history.push('/login') from landing page component to open login page. history is available in every route so can be called directly.

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

//landing page component

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

Will it help to reach your idea? I just share you the idea of routing in react using 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;

You have supposedly created your functional component/ class component, you may import and use accordingly

Update for the class components

Once the routed from one component to another component each component will load with its own state and props

I have put here my class components, you have to make sure all App.js, landing.jsx, signUp.jsx and login.jsx are on the same folder location

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;

Another way is use push method on button click inside class components, and in both cases route should be there

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

or

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