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

Reactで直接URLをたたくと404になる時の対応

More than 1 year has passed since last update.

Reactで直接URLをたたくと404になる時の対応

前提:react-router-domでルーティングしてる

index.html
<html>
  <body>
    <div id="root"></div>
  </body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React, { Component } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Switch>
            <Route exact path='/' component={HogeComponent} />
            <Route exact path='/Fuga' component={FugaComponent} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

状況:直接URL叩くと404になる

  • うまくいくケース
    • https://hogeapp.com/にアクセス → HomeComponentが表示される
    • /Fugaのリンクを踏む
    • https://hogeapp.com/Fugaに遷移 → FugaComponentが表示される
  • うまくいかないケース
    • https://hogeapp.com/Fugaが表示された後リロードする → 404ページが表示される
    • ブラウザでhttps://hogeapp.com/Fugaを直接叩く → 404ページが表示される

原因:SPA構成だと直リンクはリソースがないから死ぬ

  • リソースが存在しないと直接URLにアクセスしても404になるから
  • うまくいった時の流れ
    • https://hogeapp.com/にアクセス
    • index.htmlを読み込む
    • react-router-domのルーティングによりHomeComponentが表示される
    • /Fugaのリンクを踏む
    • react-router-domのルーティングによりFugaComponentが表示される
  • うまくいかないときの流れ
    • https://hogeapp.com/FugaのURLに直接アクセス
    • /Fugaリソースを探そうとするが、見つからない
    • 404ページ表示

対策:サーバー側の設定でリライト設定をする

firebase.json
{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
  • 上記のように全要素index.htmlに飛ばすならreact-router-domのルーティングで404コンポーネントを返却するようにする
    • もともとWebサーバー側で設定していた404.htmlは機能しなくなるので
App.js
import React, { Component } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Switch>
            <Route exact path='/' component={HogeComponent} />
            <Route exact path='/Fuga' component={FugaComponent} />
            <Route component={NotFound} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

参考

yakipudding
機械学習とかWEBアプリとか
https://yaki-lab.firebaseapp.com/
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