從組件導航到另一個組件

Question

我有登錄組件和儀表板。我的應用程序入口點是登錄頁面。成功登錄後，我想要移至主頁面（儀表板&導航）。

我試過這個像下面但它不工作。登錄後無法移動到儀表板。
我的登錄組件是

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; 

我的儀表板組件是

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; 

主要app.jsx文件

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

你onFormSumit()應該是這樣的

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

而且在app.jsx您<Router/>應該是這樣的

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

這將使瀏覽器重定向到/dashboard的形式提交。該重定向的url（/dashboard）將被<Router/>捕獲，並且該path的組件將被呈現。

[更新]

在你express，你東東添加的路徑，以便它總是返回index.html頁面。加入這個

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

，或者你可以做以下也

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

爲進一步讀，檢查this