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} 未定义！没有错误。 React 0.14.7，react-router 2.0.0。请告诉我，我错过了什么？

Answer 1

很奇怪，我无法看到您的代码本身存在任何错误。它说错误来自哪里？在render（）中是this.props.children吗？还是来自其他地方？

您可以尝试重新构建文件。以下内容适用于我使用您正在使用的相同版本的react-router：

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

Answer 2

关于马特比尔博所说的话，我同意说出一些更有帮助的话：

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')

位于顶部，以便稍后引用时代码看起来更清晰。

与＆＃39; react-router＆＃39; .browserHistory我得到this.props.children == undefined

2 个答案: