Javascript 与'；反应路由器&x27；。browserHistory我得到这个.props.children==未定义

我不明白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>
);

var React=require（'React'），
ReactDOM=require（'react-dom'），
路由器=需要（'react-Router'），
路由=路由器。路由，
browserHistory=路由器。browserHistory，
hashHistory=Router.hashHistory；
var Layout=React.createClass({
渲染：函数（）{
返回(
{this.props.children}
)
}
});
变量路由=(
);

此代码运行正常，但我将哈希代码添加到我的url。所以我只是将hashHistory更改为browserHistory，如下所示：

<Router.Router history={browserHistory}>

---

。。。在那之后，

{this.props.children}

是未定义的！没有错误。反应0.14.7，反应路由器2.0.0。请告诉我我遗漏了什么？

嗯，奇怪的是，我看不出你的代码有什么固有的错误。它说错误来自哪里？是render（）中的this.props.children吗？还是从别的地方

你可以尝试重组你的文件。以下内容适用于使用与您使用的react router相同版本的我：

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

从'react router'导入{browserHistory}；
ReactDOM.render（（
//做点什么
)，文件正文）；

嗯，奇怪，我看不出你的代码有什么内在的错误。它说错误来自哪里？是render（）中的this.props.children吗？还是从别的地方

你可以尝试重组你的文件。以下内容适用于使用与您使用的react router相同版本的我：

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

从'react router'导入{browserHistory}；
ReactDOM.render（（
//做点什么
)，文件正文）；

根据马特·比尔博的话，我同意说以下几点可能更有帮助：

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*/}
);

---

在顶部，以便以后引用时代码看起来更干净。

与Matt 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*/}
);

它位于顶部，以便以后引用时代码看起来更干净