2016-07-20 12 views
5

próbuję skonfigurować routing w Meteor użyciu react-router pakiet i napotkały następujące TypeError:React-Router: TypeError: nie można ustawić własności 'rekwizyty' o nieokreślonej

link do obrazka: https://postimg.org/image/v0twphnc7/

Kod w używam w 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')); 
}); 

problem, który udało mi się zidentyfikować to, że kiedy zdefiniować portf olio jako prosty komponent działa.

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

Ale kiedy przedłużyć go ze składnikiem jest gdzie błąd występuje w:

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


Czy możesz wyjaśnić ewentualną różnicę między „normalną” i składowej klasy i dlaczego pojawia się następujący błąd .

+0

Powinny to być React.Component, chyba że importujesz komponent oddzielnie. –

Odpowiedz

27

Zakładając, że importujesz Component jako React.Component, spróbuj usunąć nawias po Komponencie.

Powinno być:

class Portfolio extends Component { 

zamiast:

class Portfolio extends Component() { 

Jeśli nie, wymień Component z React.Component.

+1

Dziękuję bardzo! To było całkiem łatwe! :) * facepalm * – volna