Help us understand the problem. What is going on with this article?

react-routerでページ遷移する際の小技

More than 3 years have passed since last update.

どうもヒロです!
梅雨入りしましたねヾ(・ε・`*)
今年も、もうそんな季節かと考えると1年あっという間ですよね汗

時が経つのも早いので、今回も忘れないうちにreact-routerでページ遷移する際に詰まった事をメモ代わりに残しておきたいと思います。

今回のサンプルはこちらにございます。
https://github.com/takahiro-saeki/react-router-browserHistory-sample
サンプル用意する程のことでもないですが汗

browserHistoryで404エラーを回避する方法

react-routerでbrowserHistoryを使用してページ遷移をする時、何も設定しないと404エラーが出ます。
ただおそらく多くのフロントの方はgulpなりwebpackなりでビルド環境を構築し、ローカルサーバーを導入している(browser-syncやwebpack-dev-server等)と思うので、gulpの場合ですとconnect-history-api-fallbackを導入したり、webpackだとwebpack-dev-serverのhistoryApiFallbackをtrueにしてあげればローカルサーバーで見る分には404エラーを起こすことは無くなります。

ただ、もし上記のようなことをしなかったり、S3等の静的ホスティングサービスでreact-routerを使用した際に(そもそもそのような状況でreact-routerを使用するなという話しは除いて)<Link to='your path'>のような記述では仕様を満たせず、location.assignと同等のことを使用したくなった場合に、404エラーを起こさない方法はないかと色々探した結果、見つかりました。

browserHistory.push(your path);と記述することによって404エラーを起こすことなく遷移することが出来ます。

簡単にまとめると以下のような感じ

sample.js
import React, {Component} from 'react';
import { browserHistory } from 'react-router';
import Header from '../component/header';

export default class sample extends Component {
  location() {
    browserHistory.push('/sample');
  }

  render() {
    return (
      <main>
        <div onClick={this.location}>サンプル</div>
      </main>
    )
  }
}

browserHistoryをimportしてbrowserHistory.push()してあげればOK!

ただし、リロードした時には404エラーになるので、S3や静的ホスティングサービスでリロードに対する404エラーを回避する場合はインフラ側で設定しないといけないですがヽ(´・д・`)ノ

というわけで手短ですが以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした