Manus Gallagher Manus Gallagher - 18 days ago 5
React JSX Question

React-Router Navigating Through Routes Using jQuery

Ok, I have my React-Router working more or less the way I want it but my issue is this: I now need to add a bit of functionality in my JS.

Example: The user enters their details and clicks 'login', I would like my jQuery to check if the credentials are correct and if they are change the route to the home page.

I have no idea, how I would go about this.

This is my React-Router code:

import React from 'react'
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Navigation } from 'react-router'
import Login from './login'
import Signup from './signup'
import Home from './home'


ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={Login}/>
<Route path="/signup" component={Signup}/>
<Route path="/home" component={Home}/>
</Router>
), document.getElementById("app"))

$("#loginBtn").click(
function(){
var email = $('loginEmail').val();
var pass = $('loginpwd').val();

/* Check to see if credential are correct.
* If so, change to '/home route
*/
}
);


Any ideas would be greatly appreciated. Thanks :)

Answer

One way would be the following:

const openAppRoute = (route) => {
  //    Summary:
  //        Helper function for developers to navigation 
  //        to a different route programmatically.
  hashHistory.push(route);
};
window.openAppRoute = openAppRoute;

$("#loginBtn").click(
  function(){
    var email = $('loginEmail').val();
    var pass = $('loginpwd').val();

    /* Check to see if credential are correct.
     * If so, change to '/home route
     */
    window.openAppRoute("/home");
  }
);
Comments