Реагировать на динамические маршруты маршрутизатора, не отображая компонент
Я пытаюсь заставить работать динамическую маршрутизацию реакции маршрутизатора, следуя этому примеру: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'
]
}
}
]
}
./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')
);
./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>
)
}
}
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>
Когда я запускаю сервер, я вижуПривет отображается из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;