Navigation von Komponente zu einer anderen Komponente

Question

Ich habe Login-Komponente und Dashboard. Mein Anwendungseingangspunkt ist die Anmeldeseite. Nach erfolgreicher Anmeldung möchte ich zur Hauptseite wechseln (Dashboard & Navigation).

Ich versuchte dies wie folgt, aber es funktioniert nicht. Nach der Anmeldung konnte nicht ins Dashboard verschoben werden.
ist mein Login Komponente

var React = require('react'); 
var {Link} = require('react-router'); 
var Dashboard = require('Dashboard'); 

var Login = React.createClass ({ 
onFormSubmit: function(e){ 
    e.preventDefault(); 
    <Dashboard /> 
}, 
render: function(){ 
    return (
<div> 
    <h1 className="text-center">Login</h1> 
    <form onSubmit={this.onFormSubmit}> 
     <input type="text" ref="username"/> 

     <button className="button">Login</button> 
    </form> 
</div> 
) 
} 
}); 

module.exports = Login; 

Meine Übersicht Komponente ist

var React = require('react'); 
var Nav = require('Nav'); 

var Dashboard = (props) => { 
    return (
    <div> 
     <Nav/> 
     <div className="row"> 
     <div className="columns medium-6 large-4 small-centered"> 
     {props.children} 
     </div> 
    </div> 
    </div> 
); 
} 

module.exports = Dashboard; 

Haupt app.jsx Datei Ihre

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var {Route, Router, IndexRoute, hashHistory} = require('react-router'); 
var Login = require('Login'); 
var Dashboard = require('Dashboard'); 
var About = require('About'); 
var Examples = require('Examples'); 

ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={Login}> 
    <Route component={Dashboard}> 
     <Route path="about" component={About}/> 
     <Route path="examples" component={Examples}/> 
    </Route> 
    </Route> 
    </Router>, 
document.getElementById('app') 
); 

Answer 1

ist onFormSumit() wie diese

onFormSubmit: function(e){ 
    e.preventDefault(); 
    window.location.href = '/dashboard' 
}, 

sein sollte

Und Ihre <Router/> in app.jsx sollte wie dieses

<Router history={hashHistory}> 
    <Route path="/" component={Login} /> 
    <Route path="dashboard" component={Dashboard} /> 
    <Route path="about" component={About}/> 
    <Route path="examples" component={Examples}/> 
</Router> 

sein der Browser das macht einreichen /dashboard auf Formular umleiten. Diese umgeleitete URL (/dashboard) wird von <Router/> erfasst und die Komponente path wird gerendert.

[Update]

In Ihrem express, nee Sie den Pfad hinzufügen, so dass es immer die index.html Seite zurückgibt. Fügen Sie diese

app.get(['/', '/dashboard'], function(req, res){ 
    res.sendfile('./path to your index.html file') 
}) 

oder Sie können die folgende tun auch

app.get('*', function(req, res){ 
    res.sendfile('./path to your index.html file') 
}) 

Weitere lesen, prüfen this