[解決済み] react-routerで別のルートにリダイレクトする方法は？

質問

react-routerを使ってA SIMPLEをやろうとしています( バージョン ^1.0.3 ) を使用して別のビューにリダイレクトすることができますが、私はちょうど疲れています。

import React from 'react';
import {Router, Route, Link, RouteHandler} from 'react-router';


class HomeSection extends React.Component {

  static contextTypes = {
    router: PropTypes.func.isRequired
  };

  constructor(props, context) {
    super(props, context);
  }

  handleClick = () => {
    console.log('HERE!', this.contextTypes);
    // this.context.location.transitionTo('login');
  };

  render() {
    return (
      <Grid>
        <Row className="text-center">          
          <Col md={12} xs={12}>
            <div className="input-group">
              <span className="input-group-btn">
                <button onClick={this.handleClick} type="button">
                </button>
              </span>
            </div>
          </Col>
        </Row>
      </Grid>
    );
  }
};

HomeSection.contextTypes = {
  location() {
    React.PropTypes.func.isRequired
  }
}

export default HomeSection;

を '/login'に送るだけでいいんです。

どうしたらいいのでしょうか？

というエラーがコンソールに表示されます。

Uncaught ReferenceError: PropTypesは定義されていません。

私のルートを含むファイル

// LIBRARY
/*eslint-disable no-unused-vars*/
import React from 'react';
/*eslint-enable no-unused-vars*/
import {Route, IndexRoute} from 'react-router';

// COMPONENT
import Application from './components/App/App';
import Contact from './components/ContactSection/Contact';
import HomeSection from './components/HomeSection/HomeSection';
import NotFoundSection from './components/NotFoundSection/NotFoundSection';
import TodoSection from './components/TodoSection/TodoSection';
import LoginForm from './components/LoginForm/LoginForm';
import SignupForm from './components/SignupForm/SignupForm';

export default (
    <Route component={Application} path='/'>
      <IndexRoute component={HomeSection} />
      <Route component={HomeSection} path='home' />
      <Route component={TodoSection} path='todo' />
      <Route component={Contact} path='contact' />
      <Route component={LoginForm} path='login' />
      <Route component={SignupForm} path='signup' />
      <Route component={NotFoundSection} path='*' />
    </Route>
);

解決方法は？

簡単な答えとしては Link コンポーネントから react-router の代わりに button . JSでルートを変更する方法もありますが、ここではその必要はないようです。

<span className="input-group-btn">
  <Link to="/login" />Click to login</Link>
</span>

1.0.xでプログラム的にこれを行うには、clickHandler関数の中で次のようにします。

this.history.pushState(null, 'login');

アップグレードドキュメントより引用 こちら

を用意する必要があります。 this.history でルートハンドラーコンポーネントに配置します。 react-router . の下にある子コンポーネントは routes の定義がある場合、それをさらに下に渡す必要があるかもしれません。