近期在尝试react-router的动态路由功能,但是页面上什么也不显示,控制台也不报错,请教一下是什么原因,下面是主要的代码:
/* App.jsx */
import React, { Component } from 'react';
import { Link } from 'react-router';
export default class App extends Component {
render() {
return (<div>
<Link to="/foo">Foo</Link>
<Link to="/bar">Bar</Link>
<div>
{this.props.children || <span>No Content</span>}
</div>
</div>);
}
}
/* Routes.jsx */
import React from 'react';
import { Router, hashHistory } from 'react-router';
const rootRoute = {
component: 'div',
childRoutes: [
{
path: '/',
component: require('./App.jsx'),
getChildRoutes(location, cb) {
require.ensure([], (require) => {
cb(null, [
require('./routes/Foo.jsx'),
require('./routes/Bar.jsx')
]);
});
}
}
]
};
export default function Routes() {
return <Router history={hashHistory} routes={rootRoute} />;
}
// ...
render(<Routes />, document.getElementById('rootContainer'));
加上import ReactDOM from 'react-dom';
以及最后面的render()改成ReactDOM.render();
碰到过这个问题,当时按照官方文档来写的,结果有报错。手机上答的题,没有调试过,希望能帮到你。
这是我之前写的,你可以参考下。github-router
确实要.default~~~~你这个插件好像不错~我去试试
找到问题原因了。。。
因为使用了ES6语法,require的行为发生了变化,需要后面加.default才能引用到导出的模块。
可以添加一个babel插件babel-plugin-add-module-exports,这样就不用处处加.default了。