ユーザー登録で「300円クーポン」プレゼント!まずは無料登録から!
募集をシェアしてメンターを探そう
シェア
エンジニア React.js react

REACTの相談

22日前
予算
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の意味を成しておりません。


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

メンティーに提案してみましょう
募集をシェアしてメンターを探そう
シェア