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

Question

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 1

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.