首页 > react-router动态路由页面渲染不出来

react-router动态路由页面渲染不出来

近期在尝试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了。

【热门文章】
【热门文章】