Navigate to page after authentication using React Router v4

Question

I'm trying to navigate to app.js from login.js upon successful authentication. I was able to do this relatively easy using router v3 and browserhistory. I'm not really sure how to navigate pages using router v4 as their methodology seems to be very different and the previous method I used no longer works. I tried referencing this post Navigating Programatically in React-Router v4, but the suggestions didn't work for me. Any advice on how how I can traverse pages in my app with v4?

This is an Electron App

Index.js

import { HashRouter as Router } from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom'

import Login from './screens/Login';
import App from './App';


const Application = () => (
  <Router>
    <App />
  </Router>
);

ReactDOM.render(<Application />, document.getElementById('root'));

Login.js

'use strict';

import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import { Route, Router } from 'react-router-dom';
import { matchPath, withRouter, browserHistory} from 'react-router';




class Login extends React.Component{
  constructor(context){
      super(context);
      this.state = {
        email:'',
        password:'',
        err:'',
        loader: 0
      };



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

  focusEmptyInput(){
    //Focus prvog praznog inputa
    for (var ref in this.refs) {
      if(this.state[ref] === ''){
        this.refs[ref].focus();
        break;
      }
    }
  }
  handleNameChange(e){
    this.setState({name: e.target.value});
  }
  handleEmailChange(e){
    this.setState({email: e.target.value});
  }
  handlePasswordChange(e){
    this.setState({password: e.target.value});
  }
  handleSubmit(e){
    e.preventDefault();

    const email = this.state.email.trim();
    const password = this.state.password.trim();

    //Provjeri prazne inpute i focus na prvi prazan
    if((email === '')||(password === '')){
      this.setState({ err: 'All fields are required.'});
      this.focusEmptyInput();
      return;
    }



    this.setState({ err: ''});


    /** AJAX REST calls............ **/
    const userInfo = {
      email: email,
      pass: password
    };

    this.setState({ loader: 100});



var jsforce = require('jsforce');
var conn = new jsforce.Connection({
  oauth2 : {
    // you can change loginUrl to connect to sandbox or prerelease env.
    loginUrl : 'https://test.salesforce.com',
     clientId : 'empty',
    clientSecret : 'empty',
    redirectUri : 'https://test.salesforce.com/services/oauth2/token',
  }
});
conn.login(email, password, function(err, userInfo) {
  if (err) { return console.error(err,email,password);
 }

  // Now you can get the access token and instance URL information.
  // Save them to establish connection next time.
    var token = conn.accessToken;
  console.log(conn.accessToken);
  console.log(conn.instanceUrl);
  //exports.token = conn.accessToken

  sessionStorage.setItem("token", token);


  console.log("User ID: " + userInfo.id);
  console.log("Org ID: " + userInfo.organizationId);
  // ...

  // I would like to be able to redirect to app.js
   browserHistory.push('../app.js')


})









}
  render(){
    return (
      <div className="login-page">
        <div className="wrapper">
          <form className="login-form" onSubmit={this.handleSubmit}>
              <div className="title">
                  <h1>Login</h1>
                  <p>Please enter your login informations.</p>
              </div>
              <div className={(this.state.err === "") ? "hidden" : "error-message fadeIn"}>
                  <p>{this.state.err}</p>
              </div>
              <input
                  type="text"
                  ref="email"
                  className="form-control"
                  value={this.state.email}
                  onChange={this.handleEmailChange}
                  placeholder="Email"
              />
              <input
                  type="password"
                  ref="password"
                  className="form-control"
                  value={this.state.password}
                  onChange={this.handlePasswordChange}
                  placeholder="Password"
              />
              <button type="submit" className="btn">Login</button>
          </form>
        </div>
      </div>
    );
  }
}





export default Login;

app.js

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { matchPath, withRouter } from 'react-router';
import {
  Window,
  TitleBar,
  NavPane,
  NavPaneItem,
} from 'react-desktop/windows';

import { Home, Settings } from './screens';
import * as Icons from './assets/icons';


const routes = [{
  path: '/',
  exact: true,
  title: 'Home',
  icon: Icons.welcomeIcon,
  component: Home,
}, {
  path: '/settings',
  title: 'Settings',
  icon: Icons.formIcon,
  component: Settings,
}];


class App extends Component {
  static defaultProps = {
    theme: 'dark',
    color: '#cc7f29',
  }

  render() {
    const { replace, location, theme, color } = this.props; // eslint-disable-line

    return (
      <Window theme={theme} color={color}>
        <TitleBar title="My Windows Application" controls />
        <NavPane openLength={200} push theme={theme} color={color}>
          {routes.map(route => (
            <NavPaneItem
              key={route.path}
              title={route.title}
              icon={route.icon}
              selected={Boolean(matchPath(location.pathname, route.path, {
                exact: route.exact, strict: route.strict,
              }))}
              onSelect={() => {
                replace(route.path);
              }}
              color={color}
              background="#ffffff"
              theme="light"
              padding="10px 20px"
              push
            >
              <Route exact={route.exact} path={route.path} component={route.component} />
            </NavPaneItem>
          ))}
        </NavPane>
      </Window>
    );
  }
}

export default withRouter(App);

Answer 1

I was able to get this working correctly with Router v4 by making the below entries.

class Login extends React.Component{
  constructor(){
      super();
      this.state = {

        redirect: false
      };

     this.handleSubmit = this.handleSubmit.bind(this);

In my login function I used this

 handleSubmit(){

    // On Success do this...

     this.setState({
     redirect: true
   })
   }.bind(this))
}

And then in render function.

 render(){

 if (this.state.redirect) {
    return <Redirect to="../app.js" />;
  }

    return (

              </div>
              <button type="submit" onClick={this.handleSubmit} className="btn">Login</button>
              </div>
    );
  }
}

Answer 2

You could wrap your Login component in withRouter(). This provides your Login component with several props, one of which is the history.

Then you can do something like this:

handleSubmit(){
  this.props.history.push('/your-new-location');
}

Also, I noted you can use arrow functions, but still bind functions in the constructor to this?

You can bind your functions like this:

class Something extends Component {  
  boundFunction = () => {
      //You can use this here.
  }
}