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

GitHub PagesにReact Routerで作ったものを公開したときの何も表示されない場合とURLの直接指定対応

はじめに

GitHub PagesにReact Routerで作ったものを公開しようとしたら、当然そうなるよねみたいなところで引っかかったメモ。

解決策

何も表示されない。

Routerにbasenameがついてなかった。
普通にやるとサブディレクトリつくのでつけないとだめだった。つけましょう。

example.tsx
  <Router basename={process.env.PUBLIC_URL}>

urlを直接指定すると404.html

ローカルで試してるときは適当なURLだと全部index.htmlにいってたのでよかったのですが、GitHub Pagesではそうならないので当然だめだった。

解決策

HashRouterを使う手もあるがしかし、今回はページ内リンクもあったので面倒で断念。
その場合、404のページを自分で用意して、パラメータを作ってindex.htmlに飛ばしてやるという力技ソリューションがあるらしい。

調べてみたら作ってくれてる人がいたので、ありがたく使わせて頂きました。

https://github.com/rafrex/spa-github-pages
MIT Licence

ありがたい。

Why do not you register as a user and use Qiita more conveniently?
  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
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