こんにちは。NetlifyはReactで作ったSPAを簡単にホスティング出来てとても便利ですよね。

ただ404ページを表示するときは、少しだけ設定が必要です。デフォルトでは404ページはNetlify側が用意しており以下のようなページが表示されます。

これはこれでありがたいのですが、サービスをちゃんと作るなら自前のデザインの404ページを用意したいところです。そこでどうやったら404ページを独自で設定できるのか調べていると、だいたい以下のような答えがすぐ見つかります。

ルートディレクトリ直下(Reactならpublicディレクトリ直下)に404.htmlを置けばOK

そうです、その通りです。404.htmlを置くだけです。

でも今回はReactでwebサイトを作っています。なので、404.htmlを直書きして置くのではなくて、jsxで書きたいんです。既存のコンポーネントを使用して、他のコンポーネントと同じように404ページを作りたい...!　

できれば他のコンポーネントと同じようにsrc配下にNotFound.jsを作って、React Routerでルーティングできるのが理想です。ではどうすればいいのか...というと、意外と簡単で以下の３ステップです。

1. NotFound.jsをsrc配下に作成

これは他のコンポーネントと同じ要領です。src配下のディレクトリにNotFound.jsを作成します。（もちろんファイル名はNotFoundでも404でもなんでもOKです）

私は他のコンポーネントと同じようにsrc/components/NotFound/NotFound.jsという感じで作りました。

2. ルーティングにNotFoundコンポーネントを追加

index.jsのルーティングの最後に１で作ったコンポーネント（NotFound）を追加します。404ページなので、pathは設定しません。他で指定しているパスに合致しない場合は、すべてNotFoundコンポーネントに流れます。

import NotFound from "./components/NotFound/NotFound";

<BrowserRouter>
    <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/foo" component={Foo}  />
        <Route path="/bar" component={Bar} />
        <Route component={NotFound} />
    </Switch>
</BrowserRouter>

3. Netlifyのbuildコマンドを変更する

ここが肝心です。１と２をしただけでNetlifyにデプロイしても、相変わらずNetlifyの404ページが表示されてしまいます。理由はビルドしたディレクトリ直下に404.htmlが存在しないので、Netlify側は「この人は404ページを作っていないな。仕方ない、Netlifyの404ページを表示しておこう。」と判断してしまうからです。

そこで、Netlifyのビルドコマンドを「yarn build」から、以下の通りに変更します。（Netlifyの設定画面にアクセスして行えばOKです）

yarn build && cp build/index.html build/404.html

ここではビルド後のbuild/index.htmlを build/404.htmlにコピーしています。こうすることでルートディレクトリ直下に404.htmlが作成されます。また404.htmlの中身はindex.htmlと同じなので、React routerのルーティングも機能します。

あとは再度Netlifyにデプロイすれば完了です！

まとめ

404.htmlをただpublic直下に作成するよりは、他のコンポーネントと同じように管理できるので便利だと思います。UIも他のコンポーネントを流用できるので、一からhtmlを書く必要もありません。

404ページで悩んだら試してみてください。以上です！

参考にした記事