React開発におけるRoute管理

現在、Reactを用いてWebアプリケーションを作成してみている。

現在作成しているアプリケーションはマンガの共有サイトである。

簡単な動機で作成を決めたが、中々に煩雑なcomponentの数を管理しなければならずハードルは高い。

その開発の中で複数のページを用いるWEｂアプリケーションの場合、route管理が必要になってくる。

少し前にDjangoを学んだときはRoute管理はDjangoの内容でやったので基本的にバックエンドでやるものだと思っていたが、なんとReactでも出来るようだ。

Reactの便利さには感動している。

基本的にはこちらの動画を参考にするといい。

ネットで記事を探すとroute管理に使用するreact-router-domのバージョンが古いものが混ざっている。
現在(2023/03/08)では、versionは6.8,2である。基本的にバージョンが6以上のサイトを参考にしないと動かない。

私の使用例を参考のために書く。
Route管理はrouter/Router.jsxで管理している。

import { Route, Routes } from "react-router-dom";

import { Home } from "../components/top_page/Home";
import { AddManga } from "../components/AddMangaPage";
import { LoginPage } from "../components/LoginPage";
import { MangaDisplay } from "../components/manga_display_page/MangaDisplayPage";
import { NotFound } from "../components/not_found/NotFound";
import { SearchResult } from "../components/search_result/SearchResult";


export const Router = () => {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/addmanga" element={<AddManga />} />            
            <Route path="/login" element={<LoginPage />} />
            <Route path="/manga/:id" element={<MangaDisplay />}  />
            <Route path="search" element={<SearchResult/>} />
            <Route path="*" element={<NotFound />} />
        </Routes>
    );
};

そして、route管理に使うプラグインとしてreact-router-domをimportする。
routerにはRouteとRoutesの関数を使用する。

そして、App.js内はすべてのページに共有するHeaderとFooterを管理する部分にしている。
これが正しいかは知らない。

import { BrowserRouter, Link} from "react-router-dom";
import {Router} from "../../router/Router";

import Serch from "./Header";
import Footer from "./Footer";


function App() {
  
  return (
    
  <BrowserRouter>
    <div className="App">
      <h1>漫画共有サイト</h1>
      <Link to="/">Topページ</Link>
      <br />
      <Serch/>
      <br/>
      <Link to="/addmanga">漫画を追加する</Link>
      <br/>
      <Link to="/login">ログイン</Link>
    </div>
    <Router />
    <Footer />
  </BrowserRouter>
  )
}

export default App;

そして、エラーの解消に時間がかかったのがこの部分である。

import { useParams } from "react-router-dom";




export function MangaDisplay() {
    const params = useParams();
    const params_id = Number(params.id);
    const lanking = [{id:1, rank:1, name: "進撃の巨人", auther:"山田太郎", circle:"none", viewCount: 300000},{id:2, rank:2, name:"染谷悠介伝勇伝", auther:"染谷悠介", circle:"someya friends", viewCount: 4000000}]
    const result = lanking.some((manga) => (manga.id === params_id));
    return (
        <>
            <h2>選択された漫画を表示します。</h2>
            
            {result ?
            <p> {params.id}番目の漫画です。</p>:
            <p>指定された漫画は存在しません。</p>
            }
        </>
    );
};

URLからparamsを取得してそれに対応する記事を公開するという部分である。
これからFirebaseと接続しようつ思っているが、一応連想配列(pythonだと辞書型のやつ)のidに対応するparams.idがあ場合その漫画を表示するようにしたい。そのために、some()関数を用いてコーディングしたのだがfalse以外の結果を出さずにイライラしていた。

ご飯を食べてよく見ると、params.idはNumber型ではないString型であった。
なのでそれを変換するときちんと反映するようになった。

まだまだ、CSSもログインページの実装もLankingを作成するアルゴリズムも、Recommendするアルゴリズムもない。
先は長いが必ず実装していきたい。