2016-01-14 22 views
8

Sono stato seguendo l'esempio auth-flusso per reagire-router 1.0.3:this.props.location.state è nullo quando si utilizza replaceState in onEnter

var requireAuth = function(nextState, replaceState){ 
    if(!auth.loggedIn()){ 
    replaceState({ nextPathname: nextState.location.pathname }, '/login'); 
    } 
} 

export default (
    <Route component={App}> 
    <Route path='/login' component={Login}/> 
    <Route path='/' component={Messenger} onEnter={requireAuth}/> 
    </Route> 
); 

Quando qualcuno non è connesso alla funzione replaceState ottiene eseguito come previsto che mostra la pagina/login, ma lo stato:

{ nextPathname: nextState.location.pathname }

che si suppone essere in this.props.location.state è introvabile. Invece this.props.location.state non è definito.

Questo sembra essere lo stesso problema: https://github.com/rackt/react-router/issues/2768

qualcuno dovrebbe sapere perché non è stato stato impostato?

Modifica Ho provato this.props.history.replaceState e sembra passare lo stato senza problemi. Non funziona solo quando si trova nel hook onEnter.

Edit 2 Dopo aver sperimentato e imparare di più su reagire, mi sono reso conto che stavo facendo il rendering lato server con reagire. La funzione replaceState avrebbe sparato nel server, e la funzione Router.match (consigliato per il rendering lato server) avrebbero sparato:

Router.match({ routes: routes.default, location: req.url }, function(err, redirectLocation, renderProps) { 
     if (err) { 
      res.status(500).send(err.message) 
     } else if (redirectLocation) { 
      res.status(302).redirect(redirectLocation.pathname + redirectLocation.search) 
     } else if (renderProps) { 
      var html = ReactDOM.renderToString(React.createElement(Router.RoutingContext, renderProps)); 
      var page = swig.renderFile('views/index.html', { html: html }); 
      res.status(200).send(page); 
     } else { 
     res.status(404).send('Page Not Found') 
    } 
    }); 

Il redirectLocation sarebbe fissato per '/ login', e le renderProps conterrebbe il prossimo stato. Ma a quanto pare quando si fa un redirect lato server, il NextState non è passato lungo:

res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)

Se questo è corretto, allora la domanda è: come impostare uno stato in cui il reindirizzamento lato server.

risposta

0

Nella componente. Il pathName si trova in this.props.location.pathname L'ho trovato lì.

_handleSubmit: function(e) { 
    e.preventDefault(); 
    //console.log(this.props.location.state); // null ??? 
    //the above should be changed to 
    console.log(this.props.location.pathname); 
    return false; 
} 
+0

Grazie per la risposta. Ho controllato e ho ricevuto il percorso '/ login' al posto del nextState pathname a cui voglio reindirizzare dopo il login riuscito. Hai un risultato diverso? – ieldanr

Problemi correlati