Adrian Soleil Adrian Soleil - 4 months ago 55
Javascript Question

React-router: TypeError: Cannot set property 'props' of undefined

I am trying to set up routing in

Meteor
using
react-router
package and have encountered the following
TypeError
:

Link to image: https://postimg.org/image/v0twphnc7/

The code in I use in
main.js


import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

// Importing components
import App from './components/app';
import Portfolio from './components/portfolio/portfolio';


//Creating a route
const routes = (
<Router history={browserHistory}>
<Route path='/' component={App}>
<Router path='portfolio' component={Portfolio} />
</Route>
</Router>
);


// Loading routes
Meteor.startup(() => {
ReactDOM.render(routes, document.querySelector('.universe'));
});


The problem that I've managed to identify is that when I define portfolio as a Simple Component it works.

const Portfolio = () => {
return (
<div className='red'>Portfolio page</div>
);
}


But when I extend it from the Component is where the error comes in:

class Portfolio extends Component () {
render() {
return (
<div>Portfolio page</div>
);
}
}



Can you please explain the possible difference between "normal" and class component and why the following error appears.

Answer

Assuming you are importing Component as a React.Component correctly, try removing the parenthesis after Component.

Should be:

class Portfolio extends Component {

instead of:

class Portfolio extends Component () {

If not, replace Componentwith React.Component.

Comments