[英]getComponent doesn't render component
I try to set up dynamic routing with react-router and webpack. 我尝试使用react-router和webpack设置动态路由 。
require.ensure
function loads module, but getComponent method doesn't render component. require.ensure
函数加载模块,但getComponent方法不渲染组件。
In my example Button
component is rendered by default (on home page). 在我的示例中,默认情况下(在主页上)呈现
Button
组件。 When I click on the button, router redirects me to /admin url and I can see in my web console that require.ensure
loaded new chunk, but Label
component is not rendered. 当我点击按钮时,路由器会将我重定向到/ admin url,我可以在我的Web控制台中看到
require.ensure
加载了新的块,但是不会渲染Label
组件。
index.jsx index.jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, useRouterHistory, browserHistory} from 'react-router';
import { createHashHistory } from 'history'
import Button from './components/button';
let appHistory = useRouterHistory(createHashHistory)({queryKey: false});
ReactDOM.render(
<Router history={appHistory} onUpdate={() => window.scrollTo(0, 0)}>
<Route path="/" component={Button} >
<Route path="index" getComponent={(nextState, cb) => {
require.ensure([], function (require) {
cb(null, require('./components/button').default)
})}}
/>
<Route path="admin" getComponent={(nextState, cb) => {
require.ensure([], function (require) {
cb(null, require('./components/label').default)
})}}
/>
</Route>
</Router>
, document.getElementById('content')
);
button.jsx button.jsx
var React = require('react');
var bootstrap = require('bootstrap');
var bootstrapStyle = require("bootstrap/dist/css/bootstrap.css");
export default class Button extends React.Component {
constructor(props) {
super(props);
this.onRedirect = this.onRedirect.bind(this);
}
onRedirect(){
this.context.router.push({
pathname: `/admin`
});
}
render() {
return <button className="btn btn-info" type="button" onClick={this.onRedirect}>
<span className="glyphicon glyphicon-refresh"></span>
</button>;
}
}
Button.contextTypes = {
router: React.PropTypes.object
};
label.jsx label.jsx
var React = require('react');
var bootstrap = require('bootstrap');
var bootstrapStyle = require("bootstrap/dist/css/bootstrap.css");
export default class Label extends React.Component {
render() {
return <span className="label label-default">Default</span>;
}
}
package.json 的package.json
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.18.0",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"bootstrap": "^3.3.7",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"history": "^2.0.1",
"html-webpack-plugin": "^2.24.1",
"http-server": "^0.9.0",
"jquery": "^3.1.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-sass": "^3.10.1",
"npm-install-webpack-plugin": "^4.0.4",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^3.0.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2",
"webpack-merge": "^0.15.0"
}
I think you can't import your component on the fly like require('./components/label').default
. 我认为你无法像
require('./components/label').default
一样动态导入你的组件require('./components/label').default
。 You have to import your component: 您必须导入组件:
import Label from './components/label';
then to code: 然后代码:
cb(null, Label);
Your issue isn't getComponent
or dynamic routing but your route configuration. 您的问题不是
getComponent
或动态路由,而是您的路由配置。 When navigating to /admin
, react-router matches your top-level and admin routes and renders accordingly: <Button><Label /></Button>
. 当导航到
/admin
,react-router匹配您的顶级和管理路由并相应地呈现: <Button><Label /></Button>
。 Since Button
doesn't render this.props.children
, Label
won't be rendered either. 由于
Button
不呈现this.props.children
,因此也不会呈现Label
。
By looking at your code, maybe this is the config you wanted: 通过查看您的代码,也许这是您想要的配置:
<Route path="/" component={props => <div>{props.children}</div>}>
<IndexRoute component={Button} />
<Route path="index" />
<Route path="admin" />
</Route>
You can read more about how components are rendered in the route configuration guide and the Route API . 您可以在路径配置指南和Route API中阅读有关如何呈现组件的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.