[React]何も表示されない[react-router]

Question

前提

react-routerを使って、LPから別のhtmlファイルに偏移をさせようとしています。
その作業中にbrowserrouterなどを使うと真っ白になってしまいました。

実現したいこと

• LPからloginボタンを押すとlogin.htmlに移動する

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

<BrowserRouter>, <Routes>, <Route>, <HashRouter>などの偏移をするためのものを使うと真っ白になって表示されません。そもそも該当のタグが読み込まれていないみたいです。

該当のソースコード

https://github.com/shihominorth/Tastybox-react

import React, { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import LandingPage from "./landing_page/components/Landing_Page";

const loginBtnClicked = { "location.href= ${LoginPagePath}" };

function App() {

   return (
     <BrowserRouter>
      <Routes>
        <Route component={LandingPage} />
     </Routes>
     </BrowserRouter> 
  );
}

export default App;

試したこと

• BrowserRouterをHashRouterに変えましたがダメでした。
• https://reffect.co.jp/react/react-router-6に載っている様に新しく別のリポジトリを作って実装したところ同じ現象が起こりました

Comments

[退会済みユーザー]

> LPからloginボタンを押すとlogin.htmlに移動する

移動する先は React のコンポーネントではなくて、ごく普通の html ページなのですか？

[shihominorth]

はい。ただ別のindex.jsでまた別のAppコンポーネントを読んでます。そのAppコンポーネントのなかで別のコンポーネントを呼んでおります。
LPはヘッダーがないですが、ログインページや、他のページにはヘッダーがあるので、SPAという形ではなく全く別のhtml ファイルを呼ぶという形にしました。(ここら辺もみなさんどうされているかできれば知りたいです。)

ただ質問にも書いてある通り、こんな複雑ではなくても、

import ReactDOM from 'react-dom';
import App from './App';

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

質問にも書いた試したこと内の記事の中の上記のコード時点でタグが読み込まれないって感じです。

[退会済みユーザー]

移動する先がごく普通の html ページなのであれば a タグでリンクを張れば良さそうな気がしますが、そんな単純なことではないのでしょうね・・・

すみませんが自分は全体が理解できないのでお役に立てそうもありません。

> ログインページや、他のページにはヘッダーがあるので、SPAという形ではなく全く別のhtml ファイルを呼ぶという形にしました。(ここら辺もみなさんどうされているかできれば知りたいです。)

Microsoft の Visual Studio のテンプレートで作る React + ASP.NET Core アプリの例で、OpenID Connect ベースの認証サーバーに実装したログインページを React 側から呼び出して表示し、ログインするというものがあります。興味がありましたら紹介します。

Answer 1

react-router-domを使えるのはReactファイルのみです。

react外のhtmlファイルに遷移させたいなら、window.locationで実現できそうです。
参考: https://developer.mozilla.org/ja/docs/Web/API/Window/location