react.js - 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'));

解决方案

找到问题原因了。。。
因为使用了ES6语法，require的行为发生了变化，需要后面加.default才能引用到导出的模块。
可以添加一个babel插件babel-plugin-add-module-exports，这样就不用处处加.default了。

这篇关于react.js - react-router动态路由页面渲染不出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！