尝试得到react-router (v4.0.0)和react-hot loader (3.0.0-beta.6)很好地发挥,但在浏览器控制台得到以下错误:
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in.
index.js:
import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';
const renderApp = (appRoutes) => {
ReactDom.render(appRoutes, document.getElementById('root'));
};
renderApp( routes() );
routes.js:
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';
const routes = () => (
<AppContainer>
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Products} />
<Route path="/basket" component={Basket} />
</Route>
</Router>
</Provider>
</AppContainer>
);
export default routes;
EDIT
你把过程复杂化了。只要这样做:
index.js:
import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';
ReactDom.render(<routes />, document.getElementById('root'));
routes.js:
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';
const routes =
<AppContainer>
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Products} />
<Route path="/basket" component={Basket} />
</Route>
</Router>
</Provider>
</AppContainer>;
export default routes;
就我而言,VS Code让我失望了。
这是我的组件的层次结构:
<HomeScreen> => <ProductItemComponent> => <BadgeProductComponent>
我错误地导入了ProductItemComponent。事实上,这个组件以前在共享文件夹中,但后来它被移动到主文件夹中。但是当我将文件移动到另一个文件夹时,导入没有更新,保持不变:
../shared/components
同时,组件工作正常,VS Code没有突出显示错误。但是当我添加了一个新的BadgeProductComponent到ProductItemComponent,我有一个渲染错误,并认为问题是在新的BadgeProductComponent,因为当这个组件被删除,一切工作!
更重要的是,如果我通过热键到ProductItemComponent它有。/shared/components地址,然后VS Code重定向到Home文件夹的地址../ Home /components。
通常,检查所有组件级别上所有导入的正确性。
我所缺少的是我正在使用
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
正确答案应该是:
import { BrowserRouter as Router, Route } from 'react-router-dom';
当然你需要添加npm包react-router-dom:
npm install react-router-dom@next --save