React-Router使用jQuery导航路由

React-Router Navigating Through Routes Using jQuery

本文关键字:路由 导航 jQuery 使用 React-Router      更新时间:2023-09-26

好的,我的React-Router或多或少按我想要的方式工作,但我的问题是:我现在需要在我的JS中添加一些功能。

示例:用户输入他们的详细信息并单击'login',我希望我的jQuery检查凭据是否正确,如果他们更改到主页的路由。

我不知道该怎么做。

这是我的React-Router代码:

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
         */
    }
);

任何想法都将非常感激。谢谢:)

一种方法是:

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