React.jsでルーティングで切り替え表示させたいです。

Question

ルーティングで表示させたいです。
ですが、
Cannot read property 'array' of undefined
とゆうエラーを吐いてしまいます。
内容をはくdomは<div id="content"></div>です。

実現したい内容は、Routeで設定しているpathに遷移したら、componentで設定している要素を吐く。といった内容です。

どなたか、ご存知な方おられませんでしょうか？
宜しくお願い致します。

var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');
var ReactRouter = require('react-router');
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var BrowserRouter = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;

var prologue = createReactClass({
  render: function(){
    return (
      <section>
        <p>mmmmmmmm</p>
      </section>
    );
  }
});

var prologuev2 = createReactClass({
  render: function(){
    return (
      <section>
        <p>iiiiiiiii</p>
      </section>
    );
  }
});

var App = createReactClass({
  render: function () {
    return (
      <div>
        <div>
          { this.props.children }
        </div>
        <div>
          <p><Link to="/">Dashboard1111</Link></p>
          <p><Link to="a">Inbox2222</Link></p>
          <p><Link to="b">CalendarRoute3333</Link></p>
        </div>
      </div>
    );
  }
});

ReactDOM.render((
  <BrowserRouter>
    <Route path="/" component={App}>
      <Route path="a" component={prologue}/>
      <Route path="b" component={prologuev2}/>
    </Route>
 </BrowserRouter>
),document.getElementById('content')
);

Answer 1

createReactClass とか初めて見た…。 ES5縛りされてるんですか。

react-router はバージョンが変わる毎に別物になるのでお使いのバージョンを明記してください。

react-router ではなく react-router-dom を使ってください。

If you are writing an application that will run in the browser, you should instead install react-router-dom.

react-router/packages/react-router at master · ReactTraining/react-router

ご提示のコードに

<Route path="/" component={App}>
     <Route path="a" component={prologue}/>
     <Route path="b" component={prologuev2}/>
   </Route>

とありますが、少なくとも react-router-dom@4 で出来た記憶が無いんですがもし可能であればサンプルかなにかみたいです。

以下コードです。ES2015 で書いてます。適宜読み替えてください。

import React from 'react';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom';

const prologue = () => (
  <section>
    <p>mmmmmmmm</p>
  </section>
);

const prologuev2 = () => (
  <section>
    <p>iiiiiiii</p>
  </section>
);

const Home = () => (
  <div>
    <p><Link to="/">Dashboard1111</Link></p>
    <p><Link to="a">Inbox2222</Link></p>
    <p><Link to="b">CalendarRoute3333</Link></p>
  </div>
);

const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/a" component={prologue} />
      <Route path="/b" component={prologuev2} />
    </div>
  </Router>
);

ReactDOM.render(
  <App />,
  document.getElementById('content'),
);