React-router: TypeError: Unable to set property "details" undefined

Question

I am trying to configure routing in Meteor using the react-router package and encountered the following TypeError :

Image link: https://postimg.org/image/v0twphnc7/

The code 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 was able to identify is that when I define a portfolio as a simple component, it works.

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

But when I extend it from the Component, an error occurs:

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

Could you explain the possible difference between the “normal” and the component of the class and why the following error appears.

Answer 1

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

Must be:

 class Portfolio extends Component { 

instead:

 class Portfolio extends Component () { 

If not, replace Component with React.Component .