質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

126閲覧

React Routeを含むプロジェクトがビルド後動作しない

porty

総合スコア0

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/09/08 18:12

前提・実現したいこと

ReactRouteを用いたプロジェクトを作成しています。ビルド後に出力されるbundle.jsとindex.htmlのみの静的ファイルを配布したいです。

発生している問題・エラーメッセージ

先述の2ファイルを同一フォルダにまとめた上で、index.htmlをブラウザで開いても描画がなされません。

試したこと

試しにReactRouteを使用せず、単一ページのみでビルドしたところ無事動作いたしました。

質問

このような状況はなぜ発生するのでしょうか?

ReactRouteのようにURLに基づくページ遷移には、サーバによるホスティングが必須なのでしょうか?Reactはフロントで動作が完結するものと認識しているので、ReactRouteが実際にサーバと通信して表示内容を切り替えているものとは思えないのですが…。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/09/08 20:56

react-router のことでしょうか? 最初のページが描画されないのはおかしいですね。 ページ遷移に関しては、URL を書き換える場合 (BrowserRouter) はそのリンクに直接アクセスする際 (リロード時など) にサーバー側のサポートが必要になりますが、URL のハッシュ (# より後ろの部分) を書き換える場合 (HashRouter) は不要ですね。 https://qiita.com/stakezaki/items/2beceb3cc8b5dd696a8f#%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%8A%BC%E3%81%97%E3%81%9F%E3%82%89404%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B
porty

2021/09/09 05:52

ありがとうございます! react-routerです、誤記失礼しました。 頂いたリンクの内容がまさに知りたかった内容です!ホストへのアクセス不要…が基本動作のようですね。 となるとミスがあるはず…。コードを確認してみます。的確なドキュメント頂きありがとうございます!ホ
hoshi-takanori

2021/09/09 09:06

大事なことを書き忘れてましたが、質問の際はソースを貼ってくれないと回答のしようがないことが多いので、ご自分で見直してもどこに問題があるか分からなければ、質問を編集して Route を使ってるあたりのソースを貼ってください。その際、markdown の機能を使ってもらえると助かります。 https://teratail.com/help/question-tips#questionTips3-5-1
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問