学習方法

メンター情報

料金

対応時間帯

返信スピード

学習方法

メンター情報

料金

対応時間帯

返信スピード

Fop_BE

現在、独学で勉強中です。 ご検討の程、よろしくお願い致します。
プロフィールをもっとみる

--

募集をシェアしてメンターを探そう
シェア

※ この募集は締め切られました。

プログラミング React.js

REACTの相談

2021年11月6日
単発
予算
3,000円 〜 10,000円
提案数
1人が提案中
応募期限
終了

現在、REACTにて独学で勉強しております。
既存のWEBサイトをREACTにてSPA化から始め、JSXを使い成功致しました。

ここで2点問題があり、こちらの解決方法をご教授頂ける方を募集しております。

1. htaccessを使ったリダイレクト

http→https リダイレクト
www有→www無 リダイレクト

http://www.sample.work にアクセスすると、https://sample.work にリダイレクトされる正常な動作をします。(https、www共に)
しかし、http://www.sample.work以外の子ページ(sample.work/hogeやsample.work/hoge/hogeなど)はリダイレクトが行われません。

こちらを全ページwww無し、httpsにリダイレクトさせて正規化させたいです。


2.外部js等の読み込み

こちらは勉強の仕方を間違えたのですが、既存の一般的なHTML,CSS,JSを使ったサイトをREACTにてSPAに致しました。
ですので、index.htmlには、
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
等の内部JSや外部JSが読み込まれております。

Buildした際に、ソース上に上記のようなJSが読み込まれているのは不格好かと思い、importやHelmet、ScriptTag等を使い、index.htmlから読み込むのではなくcomponentのファイルから読み込ませたいです。
(こちらは特に意味はないのは重々承知ですが、build後のindex.htmlに表示されなければOKとしております。)

3.SPAにした際の画面遷移に関して

各ページに上記2で読み込んだJSファイルが読み込まれておりサイト内等のエフェクトに使用されております。
https://sample.work にアクセスした際は正常に読み込まれますが、

https://sample.work(正常)

https://sample.work/hoge

https://sample.work(読み込まれない)

上記のような遷移を行ったときに、JSが読み込まれず(イベントが発火せず)にエフェクトが動きません。

こちらの解決法等をお伺いしたいです。
現在は<BrowserRouter forceRefresh={true}>を使用することにより正常に動作しますが、SPAの意味を成しておりません。


ご検討の程お願い致します。

Fop_BE

プロフィール

現在、独学で勉強中です。
ご検討の程、よろしくお願い致します。

--

募集をシェアしてメンターを探そう
シェア