🤔

【React】リロード(URL直打ち)すると真っ白になる

2021/12/28に公開
2

困ったこと

URLパラメータを指定しているページをリロード、またはそのURLを直打ちすると画面が真っ白になる。

解決策

調べると、inex.htmlに<base href="/">を設定する必要があるみたい。

https://teratail.com/questions/26245
(回答がとてもわかりやすくて助かる…)

注意点は、他のURL属性を指定しているタグよりも前に書くこと。

<head>
	<title>hoge</title>
	<base href="/" >
	<link rel="style" href="css/style.css">
</head>

<base>タグと<link>タグの順番を逆にしてしまうと、cssが読み込まれません。
私はこれで悩んでしまった。。
そして説明をよく読んだら書いてました。。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/base

以下の属性のいずれかが指定されている場合、この要素は URL の属性値を持つ他の要素の前におかなければなりません。例えば <link> の href 属性などです。

追記

コメントをいただいたので追記。
今回はhref="css/style.css"href="/css/style.css"に修正することで解決しました。
相対パスになっていたので読み込まれなかったようです。。。

Discussion

catnosecatnose

調べると、inex.htmlに<base href="/">を設定する必要があるみたい。

今回のケースでは不要な気がします。CSSやJavaScriptファイルのパスの書き方に問題があるのだと思います。
上のコードだとhref="css/style.css"となっていますが/css/style.cssのようにスラッシュで始めれば読み込まれるようになるのではないかと思います。
真っ白になるということはおそらくscriptタグのパスの指定の仕方も修正が必要だと思います。

erikoeriko

ご指摘の通り、<base>タグは不要で、パスをスラッシュ始まりに修正することで解決できました!
今まで相対パスだったから、URLパラメータ/css/style.css を見に行っていたということですね。(scriptも同様)
ありがとうございます!