reactjs - React-Router github - React ルーターを使ったプログラムによるナビゲート

React Router / reactjs / react-router

react-router Iが使用できる Link ネイティブにルータを反応させることにより、処理されたリンクを作成する要素を。

ナビゲーションしたいです。リンクからではなく、ドロップダウン選択から(例として)。コードでこれを行うにはどうすればよいですか? this.context とは何ですか?

Deepak Rai



Answer #1

以下は、react-routerを使ってプログラムによるナビゲーションを使用した私のreactコンポーネントです。

import React from 'react';

class loginComp extends React.Component {
   constructor( context) {
    super(context);
    this.state = {
      uname: '',
      pwd: ''
    };
  }

  redirectToMainPage(){
        this.context.router.replace('/home');
  }

  render(){
    return <div>
           // skipping html code 
             <button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
    </div>;
  }
};

 loginComp.contextTypes = {
    router: React.PropTypes.object.isRequired
 }

 module.exports = loginComp;

以下は私のルーターの構成です。

 import { Router, Route, IndexRedirect, browserHistory } from 'react-router'

 render(<Router history={browserHistory}>
          <Route path='/' component={ParentComp}>
            <IndexRedirect to = "/login"/>
            <Route path='/login' component={LoginComp}/>
            <Route path='/home' component={HomeComp}/>
            <Route path='/repair' component={RepairJobComp} />
            <Route path='/service' component={ServiceJobComp} />
          </Route>
        </Router>, document.getElementById('root'));