react-router v2不会使用context.router.replace进行转换

Question

我正在使用react-router v 2.0.0并尝试按照以下链接中的示例实现登录。 https://github.com/tylermcginnis/react-router-firebase-auth

问题是登录后页面会转换，但这不会反映在URL中。 因此该网址仍为#/而不是#/main 。

这是我的代码。 任何帮助深表感谢

routes.js

import React from 'react';
import { Router, Route} from 'react-router' ; 
import { IndexRoute } from 'react-router' ;
import { hashHistory } from 'react-router'
import LoginPage from '../components/LoginPage.js';
import App from '../../app.js';
import MainApp from '../components/MainApp.js';
import firebaseUtils  from '../firebaseUtils.js';



function requireAuth(nextState, replace) {
    console.log(nextState);
    console.log(!firebaseUtils.isLoggedIn());
  if (firebaseUtils.isLoggedIn()!=true) {  
    replace({
      pathname: '/',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}


var routes=(  
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={LoginPage}/>

      <Route path='main' component={MainApp} onEnter={requireAuth}>

      </Route>

    </Route>
  </Router>
);

module.exports = routes;

LoginPage.js

import React from 'react';  
import firebaseUtils  from './../firebaseUtils.js'
import { browserHistory } from 'react-router'

var LoginPage=React.createClass({

    contextTypes: {
    router: React.PropTypes.object.isRequired
    },
    getInitialState: function(){
    return {  
      error: false
    }
    },

    onChangeEmail:function(e){ 
       this.setState({email: e.target.value}); 
    },

    onChangePassword:function(e){

        this.setState({password: e.target.value}); 
    },

    formSubmit:function(e){

        e.preventDefault();

        //authenticate user
        if (this.state.email.trim().length !== 0&&this.state.password.trim().length !== 0)
        {
            firebaseUtils .loginWithPassword({email: this.state.email, password: this.state.password}, function(){
            var location = this.props.location;
              if (location.state && location.state.nextPathname) {
                this.context.router.replace(location.state.nextPathname);
                console.log('choice 1')
              } else {
                this.context.router.replace('/main');
                console.log('choice 2');
                 }
            }.bind(this));

        }

        this.setState({email: '',password:''});
    },


    render:function(){
            console.log('Rendering Login');
            var errors = this.state.error ? <p> Error on Login </p> : '';
            return(<div className="container">
                <div className="main">
                    <h2 className="welcome-header">TenReps Admin</h2>
                    <hr/>
                    <form className="login-form" onSubmit={this.formSubmit}>
                        <br/>
                        <input type="text" name="email" id="email" onChange={this.onChangeEmail} placeholder="Email" value={this.state.email}/>
                        <br/>
                        <input type="password" name="password" id="password" onChange={this.onChangePassword} placeholder="Password" value={this.state.password}/>
                        <br/>
                        <button type="submit" className="submit-login" >Login</button>
                    </form>
                    {errors}
                 </div>
                </div>);

    }

});

export default LoginPage 

firebaseUtils.js

var ref = new Firebase('https://firebaseapp.firebaseio.com/');
var cachedUser = null;

var firebaseUtils={

 loginWithPassword: function(userObj, cb, cbOnRegister){
    ref.authWithPassword(userObj, function(err, authData){
      if(err){
        console.log('Error on login:', err.message);
      } else {
        console.log('Logged In:');
        authData.email = userObj.email;
        cachedUser = authData;
        cb(authData);
      }
    }.bind(this));
  },
  isLoggedIn: function(){
    return cachedUser && true || ref.getAuth() || false;
  },
  logout: function(){
    ref.unauth();
    cachedUser = null;
  },



}

export default firebaseUtils;

Answer 1

好。 所以这样做的原因是我正在使用Webpack-devserver-意味着我的应用程序出现在此URL http：// localhost：8080 / webpack-dev-server /＃

如果要显示更改的url，请转到http：// localhost：8080 / 。 但是，这种方式将不会进行热重装。