I am trying to set up routing in Meteor using react-router package and have encountered the following TypeError:
Link to image:
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.
1 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.
