Going to another page in ReactJS

Question

I am attempting to learn reactjs and I've looked up so many different resources from using react-route to react-route-dom but everything I've tried doesn't work as everything says it does so I am not sure what I am misssing.

I have a class component called LoginForm which renders the form and handles all of the logic for submitting to API and handling the response.

The api request is working and I successfully check that the login is valid, I then want to redirect to another page called dashboard.html.

Below is my component class

import React from 'react'
import * as api from '../JSFuncs/APIManager'
import 'react-router-dom'

class LoginForm extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            username: '',
            password: '',
            show_notice: false,
            error_msg: ''
        };

        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleUsernameChange(event) {
        this.state.username = event.target.value;
        this.setState(this.state);
    }

    handlePasswordChange(event) {
        this.state.password = event.target.value;
        this.setState(this.state);
    }


    handleSubmit(event) {

        event.preventDefault();

        this.props.history.push("dashboard.html");

        this.state.show_notice = true;

        this.setState(this.state);

        const postArray = {
            username: this.state.username,
            password: this.state.password
        };



        let comp = this;
        api.sendRequest(postArray, "admin/authenticator.php", "submitLogin").then(function(result){
            alert(JSON.stringify(result));

            if (result.result === 0)
            {
                if (result.data === 0) //Login OK
                {
                    comp.history.pushState(null, 'dashboard.html');
                    //comp.props.history.push('/dashboard.html');
                }
                comp.setState(comp.state);
            }
            else
            {
                comp.state.password = '';
                comp.state.error_msg = 'An error occurred with the DB';
                comp.setState(comp.state);
            }

            comp.state.show_notice = true;
            comp.setState(comp.state);
        })
    }
    render() {
        const style = this.state.show_notice === false ? {display: 'none'} : {};
        const { location, history } = this.props
        return (
            <section className="h-100">
                <div className="container h-100">
                    <div className="d-flex align-items-center justify-content-center h-100">
                        <div className="d-flex flex-column align-self-center">


                            <LoginStatus style={style} error_msg={this.state.error_msg} />

                            <form onSubmit={this.handleSubmit} className='form-horizontal align-self-center'>
                                <div className='form-group row'>
                                    <label htmlFor='txtUsername' className='col-sm-2 col-form-label'>Username: </label>
                                    <div className='col-sm-9'>
                                        <input type='text' className='form-control' id='txtUsername' value={this.state.username}
                                               placeholder='Your Username' onChange={this.handleUsernameChange}/>
                                    </div>
                                </div>
                                <div className='form-group row'>
                                    <label htmlFor='txtPassword' className='col-sm-2 col-form-label'>Password: </label>
                                    <div className='col-sm-9'>
                                        <input type='password' className='form-control' id='txtPassword' value={this.state.password}
                                               placeholder='Your password' onChange={this.handlePasswordChange}/>
                                    </div>
                                </div>
                                <div className='formButtonContainer'>
                                    <button className='btn-primary'>Login</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        );
    }
}

class LoginStatus extends React.Component
{


    render(){
        const className = this.props.error_msg === '' ? 'alert-info' : 'alert-warning';
        const msg = this.props.error_msg === '' ? 'You\'ve successfully logged in' : this.props.error_msg;
        return(
            <div style={this.props.style} className={'alert ' + className}>
                {msg}
            </div>
        )
    }
}

export default LoginForm

In the response of handleSubmit I check if the login result is 0 and then I am using comp.history.pushState (comp is declared to be this so its in scope of the promise).

I've tried pushState and push from other examples, but I get the same type of error. I've also tried comp.state.history.push but no luck. I login successfully and show the alert box when I do the history push I get the following:

TypeError: Cannot read property 'push' of undefined

I'm very new to react so apologise if this is a simple answer but I can't seem to get my hand around how this works from everything I've googled.

Answer 1

In your App.js you should manage pages with routes:

import {BrowserRouter, Route, Switch} from "react-router-dom";
import { createBrowserHistory } from "history";
import {LoginForm} from './components/LoginForm';
import {Dashboard} from './components/Dashboard';

const history = createBrowserHistory();

class App extends Component {
  constructor(props) {
    super(props);
    console.log(props)
  }

  render() {

path="/" is your home or main page path="/dashboard" is your dashboard

return (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/" render={(props) => <LoginForm props={history} {...props} /> } exact />
        <Route path="/dashboard"  render={(props) => <Dashboard props={history} {...props} /> }/>
      </Switch>
    </div>
  </BrowserRouter>
)

then in your LoginForm you can

export class LoginForm extends Component {

    constructor(props) {
        super(props);
        console.log(props)
    }
    go_dashboard = (e) => {
        this.props.history.push("/dashboard");
    }

This will then Switch to your Dashboard component.