Router`不再将历史支柱默认为哈希历史记录

时间:2016-09-15 08:57:04

标签: reactjs react-router ecmascript-5

在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},但它仍然在抱怨。

任何可能出错的提示?

由于

2 个答案:

答案 0 :(得分:1)

不,你没有。你刚刚定义它而没有使用它。您必须在路由器标记中传递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需要反应v15.3.0及更高版本。访问   以下链接。

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

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

答案 1 :(得分:1)

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

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

当{routes}已经包含{}时,在渲染时无需再次指定它。因此,当然,渲染代码中缺少{history} prop。所以,我只是将渲染代码更改为:

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

它完美无缺!

由于