[英]React router dynamic routes not rendering component
我正在嘗試通過以下示例使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'
]
}
}
]
}
./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
顯示了Hello ,也看到了App.js
console.log('testing')
,但是實際的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;
我認為,您使用的是Babel 6,其中它們更改了 commonjs require
語法。
現在,您需要添加default
:
component: require('./components/App').default
我遇到了同樣的問題,終於找到了使它工作的方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.