web-dev-qa-db-ja.com

React-router：TypeError：未定義のプロパティ 'props'を設定できません

react-routerパッケージを使用してMeteorでルーティングを設定しようとしていますが、次のTypeErrorに遭遇しました：

画像へのリンク： https://postimg.org/image/v0twphnc7/

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'));
});

私が特定できた問題は、ポートフォリオを単純なコンポーネントとして定義すると機能することです。

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

しかし、コンポーネントから拡張すると、エラーが発生します：

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


「通常の」コンポーネントとクラスコンポーネントの違いと、次のエラーが表示される理由を説明してください。

javascriptmeteorreactjsreact-router
12
volna

ComponentをReact.Componentとして正しくインポートしていると仮定して、Componentの後の括弧を削除してみてください。

する必要があります：

class Portfolio extends Component {

の代わりに：

class Portfolio extends Component () {

そうでない場合は、ComponentをReact.Componentに置き換えます。

72
kctang