React Router v4を使用した認証後のページへの移動

Question

認証が成功するとlogin.jsからapp.jsにナビゲートしようとしています。私はルータv3とbrowserhistoryを使ってこれを比較的簡単に行うことができました。彼らの方法論が非常に異なっているように見えるため、ルータv4を使用してページをナビゲートする方法はわかりません。以前使用していた方法はもう機能しません。私はこの投稿を参照しようとしましたNavigating Programatically in React-Router v4、しかし私の提案はうまくいきませんでした。 v4でアプリ内のページをどのようにトラバースできるかについてのアドバイスはありますか？

この

は

をapp.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

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です10

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()にログインコンポーネントをラップすることができます。 これは、Loginコンポーネントにいくつかの小道具を提供します。そのうちの1つはhistoryです。また

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

、私はあなたがこれにコンストラクタで機能を矢印の関数を使用しますが、まだバインドすることができます注意：

は、その後、あなたはこのような何かを行うことができますか？

あなたはこのようなあなたの関数をバインドすることができます。

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