React.js
Pocket

React Routerの小ネタ

導入まではこちら。この続きです。

React Routerでルーティングをやってみる

buttonタグとかで送信処理のあと、別のページにリダイレクトさせたいときにどうすればいいのか分からず、やってみたメモです。

最初はボタンにLink toでやればいいかと思って、書いてみましたが、、、

import React from 'react';
import {render} from 'react-dom';
import { Link } from 'react-router';

export class Contact extends React.Component {
  onSubmit() {
    // 送信の処理をこの辺に書いて...
  }
  render() {
    return (
      <div>
        <h1>contact</h1>
        <button><Link to="/">送信</Link></button>
      </div>
    );
  }
}

これbuttonタグの中にaタグできちゃうし、ダメだなと思って他の方法調べて、以下の方法にたどり着きました。

import React from 'react';
import {render} from 'react-dom';
import { browserHistory } from 'react-router';

export class Contact extends React.Component {
  onSubmit() {
    // 送信の処理をこの辺に書いて...
    browserHistory.push('/')
  }
  render() {
    return (
      <div>
        <h1>contact</h1>
        <button onClick={this.onSubmit.bind(this)}>送信</button>
      </div>
    );
  }
}

何かしら送信処理したあとにbrowserHistory.pushでリンク先を指定すると、そこに遷移してくれます。スラッシュ(/)のところをaboutとかにするとそのページに遷移します。

これがベストなのか分からないですが、とりあえずできたのでよし。何かReact Routerの詳しい情報あれば教えてください。

参考にした記事

Leveling Up With React: React Router

CSS-Tricks
Pocket

Category : Tag :