反应路由器 Webpack HMR。根路由必须呈现单个元素
React-router Webpack HMR. The root route must render a single element
我试图弄清楚当启用 HMR 并卡在以下错误时,react-router 在 AppContainer 中是如何工作的。你能解释一下黑客是怎么回事吗?
Invariant Violation: The root route must render a single element
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
// AppContainer is a necessary wrapper component for HMR
import Routes from './routes/index';
const MOUNT_APP = document.getElementById('root');
const render = () => {
ReactDOM.render(
<AppContainer>
<Routes />
</AppContainer>,
MOUNT_APP
);
};
render();
// Hot Module Replacement API
if (module.hot) {
module.hot.accept('./routes/index', () => {
render()
});
}
路由文件为:
import React from 'react';
import { Router, IndexRoute, browserHistory } from 'react-router';
import Home from './Home';
import SubView from './Sub';
const componentRoutes = {
component : Home,
path : '/',
indexRoute : SubView,
childRoutes : [
]
}
const Routes = () => {
return (
<Router history={browserHistory} routes={componentRoutes} />
);
};
export default Routes;
主页视图组件:
import React from 'react';
const HomeView = () => {
<div>
<h4>Welcome</h4>
</div>
}
export default HomeView;
家景路线:
import HomeView from './components/SubView';
export default {
component: HomeView
}
P.S: SubView 等于 HomeView.
您的 HomeView
组件没有 return 任何东西。您需要将内部 jsx 包装在 return ( ... )
.
中
您需要 return 组件中的一个元素。现在 HomeView
的组件如下所示:
const HomeView = () => {
<div>
<h4>Welcome</h4>
</div>
}
您需要 return 标记而不是像这样将其放在函数体中:
const HomeView = () => {
return (
<div>
<h4>Welcome</h4>
</div>
)
}
我试图弄清楚当启用 HMR 并卡在以下错误时,react-router 在 AppContainer 中是如何工作的。你能解释一下黑客是怎么回事吗?
Invariant Violation: The root route must render a single element
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
// AppContainer is a necessary wrapper component for HMR
import Routes from './routes/index';
const MOUNT_APP = document.getElementById('root');
const render = () => {
ReactDOM.render(
<AppContainer>
<Routes />
</AppContainer>,
MOUNT_APP
);
};
render();
// Hot Module Replacement API
if (module.hot) {
module.hot.accept('./routes/index', () => {
render()
});
}
路由文件为:
import React from 'react';
import { Router, IndexRoute, browserHistory } from 'react-router';
import Home from './Home';
import SubView from './Sub';
const componentRoutes = {
component : Home,
path : '/',
indexRoute : SubView,
childRoutes : [
]
}
const Routes = () => {
return (
<Router history={browserHistory} routes={componentRoutes} />
);
};
export default Routes;
主页视图组件:
import React from 'react';
const HomeView = () => {
<div>
<h4>Welcome</h4>
</div>
}
export default HomeView;
家景路线:
import HomeView from './components/SubView';
export default {
component: HomeView
}
P.S: SubView 等于 HomeView.
您的 HomeView
组件没有 return 任何东西。您需要将内部 jsx 包装在 return ( ... )
.
您需要 return 组件中的一个元素。现在 HomeView
的组件如下所示:
const HomeView = () => {
<div>
<h4>Welcome</h4>
</div>
}
您需要 return 标记而不是像这样将其放在函数体中:
const HomeView = () => {
return (
<div>
<h4>Welcome</h4>
</div>
)
}