React路由器动态路由不呈现组件

Question

React路由器动态路由不呈现组件

Ale*_*x B 2 javascript reactjs react-router

我试图通过以下示例来使路由器动态路由反应起作用:https://github.com/rackt/react-router/tree/master/examples/huge-apps

这是我的设置:

webpack.config.js:

module.exports = {
  devtool: 'inline-source-map',
  entry: './js/app.js',
  output: {
    path: '../public',
    filename: 'test-app.js',
    chunkFilename: '[id].chunk.js',
    publicPath: '/public/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: [
            'es2015',
            'react'
          ]
        }
      }
    ]
  }

Run Code Online (Sandbox Code Playgroud)

./js/app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { createHistory, useBasename } from 'history';
import { Router } from 'react-router';

const history = useBasename(createHistory)({
  basename: '/'
});

const rootRoute = {
  component: 'div',
  childRoutes: [{
    path: '/',
    component: require('./components/App')
  }]
};

ReactDOM.render(
    <Router history={history} routes={rootRoute} />,
    document.getElementById('root')
);

Run Code Online (Sandbox Code Playgroud)

./components/App.js:

import React from 'react';

console.log('testing');

export default class App extends React.Component {
  render() {
    console.log('App');
    return (
        <div>
          App!
        </div>
    )
  }
}

Run Code Online (Sandbox Code Playgroud)

index.html:

<!doctype html>
<html>
    <head>
        <title>Test App</title>
    </head>
    <body>
        Hello
        <div id="root"></div>
        <script src="public/test-app.js"></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

当我运行服务器时,我看到Hello显示index.html,我也看到console.log('testing')了App.js,但实际的App.js组件没有呈现.有什么想法吗？

谢谢!

编辑: 如果我改为./components/App.js下面的ES5语法,它的工作原理!这是为什么？路由器的反应是否component: require('./components/App')与ES6不兼容？

var React = require('react');

var App = React.createClass({
  render: function() {
    return (
      <div>
        App!
      </div>
    )
  }
});

module.exports = App;

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

我想,你正在使用Babel 6,他们改变了 commonjs的require语法.

现在,您需要添加default:

component: require('./components/App').default

Run Code Online (Sandbox Code Playgroud)

我有同样的问题,终于找到了如何让它工作.

归档时间：	10 年前
查看次数：	3012 次
最近记录：	10 年前