Martin Fahl Martin Fahl - 4 months ago 18
Javascript Question

Invalid prop 'component' when using redux-react with react-router

When using

connect
from react-redux in my case react router does not see my react component as a valid component. And there is a warning: Failed propType: Invalid prop
component
supplied to
Route


index.js


import { connect } from 'react-redux'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import plattformApp from './reducers'

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var hashHistory = ReactRouter.hashHistory;
var Main = require('./components/Main');

let store = createStore(plattformApp)

ReactDOM.render(
<Provider store={store}>
<Router history={hashHistory}>
<Route path='/' component={Main}>
</Route>
</Router>
</Provider>,
document.getElementById('app')
)


Main.js


var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;
var KNGui = require("../components/KNGui");
var Search = require("../components/Search");

var Main = React.createClass({
render: function () {
return (
<div>
</div>
)
}
});

function mapStateToProps(state) {
return { test: state }
}

export default connect(mapStateToProps)(Main)

Answer

Right now var Main contains full module.

To access component you need either

var Main = require('./components/Main').default;

or

import Main from './components/Main';

to get component.

Comments