index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import { Route } from 'react-router';
import reducer from './reducers';
import App from './components/App';
import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
const history = createHistory();
const store = createStore(
reducer,
applyMiddleware(thunk),
applyMiddleware(routerMiddleware(history))
)
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Route exact path="/" component={App}/>
</div>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
App.js
import React from 'react';
import Header from './Header';
import MainSection from '../containers/MainSection';
class App extends React.Component {
render() {
return (
<div className="container-fluid">
<Header />
<MainSection />
</div>
);
}
}
export default App;
Header.js
import React, { Component } from 'react';
import { IndexLink } from 'react-router';
export default class Header extends Component {
render() {
return (
<nav>
<IndexLink to="/" activeClassName="active">Home</IndexLink>
</nav>
)
}
};
控制台输出:
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. Check your code at Header.js:8.
in Header (at App.js:9)
in div (at App.js:8)
in App (created by Route)
in Route (at index.js:23)
in div (at index.js:22)
in Router (created by ConnectedRouter)
in ConnectedRouter (at index.js:21)
in Provider (at index.js:20) bundle.js:11913:10
Error: Element 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. Check the render method of `Header`. bundle.js:11472:16
有什么想法吗?感谢
更新
import React from 'react';
import { Link } from 'react-router-dom';
export default class Header extends React.Component {
render() {
return (
<nav>
<Link to="/" activeClassName="active">Home</Link>
</nav>
)
}
};