Router` 不再将 history 属性默认为哈希历史

Question

在 ES5 中使用 React-Router，我有以下代码

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

var About = require('./components/about/aboutPage');

var routes = (
    <Router>
        <Route path="/" handler={App}>
            <Route path="about" handler={About}/>
        </Route>
  </Router>
);

module.exports = routes;

这在 {main.j} 中呈现为

var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var routes = require('./routes');

ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'));

但是，在控制台中，我收到此警告并且没有加载任何内容：

bundle.js:1845 Warning: [react-router] `Router` no longer defaults the history prop to hash history. Please use the `hashHistory` singleton instead

我在上面的代码中明明已经传递了{hashHistory}，但是它还是一直报错

有什么可能出错的提示吗？

谢谢

Answer 1

不，你没有't.You 只是定义了它并且没有使用它。您必须在路由器标签中传递 history={hashHistory}。

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

var About = require('./components/about/aboutPage');

var routes = (
    <Router history={hashHistory}>
        <Route path="/" handler={App}>
            <Route path="about" handler={About}/>
        </Route>
  </Router>
);

module.exports = routes;

P.S. react-router 2.8.0 requires react v15.3.0 and above. Visit the following link.

https://www.versioneye.com/nodejs/react-router/2.8.0

如果你没有这个，我建议你使用 react-router v2.0.0 或更新你对所需版本的反应。

Answer 2

找到原因 - 这是我的渲染代码的问题

ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'));

因为 {routes} 已经包含 {}，所以渲染时不需要再次指定它。因此，当然，渲染代码中缺少 {history} 道具。所以，我只是将渲染代码更改为：

ReactDOM.render(routes, document.getElementById('app'));

而且效果很好！

谢谢

Router` 不再将 history 属性默认为哈希历史

Router` no longer defaults the history prop to hash history

ecmascript-5

reactjs

react-router