在使用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

我能通過使下面的條目與路由器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> 
    ); 
    } 
} 

Answer 2

您可以將您的登錄組件包裝在withRouter()中。 這提供了您的登錄組件與幾個道具，其中之一是history。

然後，你可以做這樣的事情：

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

另外，我注意到你可以使用方向的功能，但仍綁定功能，在構造函數呢？

可以綁定你的函數是這樣的：

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