使用 React Router v4 进行身份验证后导航到页面

Question

我正在尝试在成功验证后从 login.js 导航到 app.js。使用路由器 v3 和浏览器历史记录，我能够相对容易地做到这一点。我不太确定如何使用路由器 v4 导航页面，因为它们的方法似乎非常不同，而且我以前使用的方法不再有效。我尝试参考这篇文章Navigating Programatically in React-Router v4，但这些建议对我不起作用。关于如何使用 v4 遍历我的应用中的页面的任何建议？

这是一个电子应用程序

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

您可以将您的登录组件包装在withRouter() 中。 这为您的 Login 组件提供了几个 props，其中之一是 history。

然后你可以这样做：

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

另外，我注意到您可以使用箭头函数，但仍将构造函数中的函数绑定到 this？

你可以像这样绑定你的函数：

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

Answer 2

通过输入以下条目，我能够在 Router v4 上正常工作。

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

        redirect: false
      };

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

在我的登录功能中我使用了这个

 handleSubmit(){

    // On Success do this...

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

然后在渲染函数中。

 render(){

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

    return (

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