與'react-router'.browserHistory我得到this.props.children == undefined

Question

我不明白browserHistory如何更改應用程序執行。這是代碼工作正常：

var React = require('react'), 
    ReactDOM = require('react-dom'), 
    Router = require('react-router'), 
    Route = Router.Route, 
    browserHistory = Router.browserHistory, 
    hashHistory = Router.hashHistory; 

var Layout = React.createClass({ 

    render: function() { 
     return (
      <div> 
       <SideMenu /> 
       {this.props.children} 
      </div> 
     ) 
    } 
}); 

var routes = (
    <Router.Router history={hashHistory}> 
     <Route path="/" component={Layout}> 

      <Route path="auth/startpage" component={require('./startpage')}/> 

     </Route> 
    </Router.Router> 
); 

此代碼工作正常，但我得到哈希代碼到我的網址。所以，我只是改變hashHistory到browserHistory這樣的：

<Router.Router history={browserHistory}> 

...，之後{this.props.children}是不確定！沒有錯誤。反應0.14.7，react-router 2.0.0。請告訴我我錯過了什麼？

Answer 1

嗯奇怪的是，我看不出你的代碼固有的任何錯誤。它說錯誤是從哪裏來的？在render（）中是this.props.children嗎？或從其他地方？

你可以嘗試重構你的文件。使用反應路由器相同版本的，我下面的作品您使用的是：

import { browserHistory } from 'react-router'; 
ReactDOM.render (( 
<Router history={browserHistory} /> 
    // Do Something 
</Router> 
), document.body); 

Answer 2

去關一下馬特Bilbow說，我同意它可能是更有幫助的說沿着線的東西：

import { Router, Route, browserHistory } from 'react-router' 

這樣，它使得它在寫入和讀取代碼時更具語義。例如，您的最終代碼將類似於：

var Layout = React.createClass({ 

    render: function() { 
    return (
     <div> 
     <SideMenu /> 
     {this.props.children} 
     </div> 
    ) 
    } 
}); 

var routes = (
    <Route path="/" component={Layout}> 
     <Route path="auth/startpage" component={require('./startpage')}/> 
    </Route> 
); 

ReactDOM.render(
    <Router history={browserHistory}> 
    {routes} 
    </Router>, 
    document.body {/*or wherever want it to render from*/} 
); 

您可能還需要在只是這樣的代碼看起來，當你以後引用它清潔頂部申報

var startPage = require('./startpage') 

。