React/Typescript/Laravel8のSPA

SPAでやったことなかったので記録。

laravelルーティング設定。

routes/web.php

Route::get('{any}',function(){
    return view('welcome');
})->where('any', '.*');

下記はapiルート以外の設定。

Route::get('{any}',function(){
    return view('welcome');
})->where('any', '(?!api).*');

react-router-domインストール。

npm i -D react-router-dom

resources/ts/app.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';


import { TopPage } from './components/TopPage';
import { MyPage } from './components/MyPage';
import { PostPage } from './components/PostPage';
import EditPostForm from './components/EditPostForm';

const App = () => {
  const title: string = 'Hello TypeScript React'
  return (
    <div id="main">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<TopPage />} />
          <Route path="/mypage" element={<MyPage />} />
          <Route path="/posts" element={<PostPage />} />
          <Route path="/posts/edit/:id/" element={<EditPostForm />} />
        </Routes>
        <ul>
          <li><Link to="/">Top</Link></li>
          <li><Link to="/mypage">Mypage</Link></li>
          <li><Link to="/posts">投稿一覧</Link></li>
        </ul>
      </BrowserRouter>
    </div >
  )
}

const container: any = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

めっちゃ雑に記載してるけどこんな感じ（現在サンプルで作成中）。

import { TopPage } from './components/TopPage';

<Route path="/" element={<TopPage />} />

とかはimport先のフォルダ内にコンポーネントを作成してる。

---

react-router-dom v6

react-router-dom v6 では記事でよくでてきたSwitchやexact使えなかったので、Routes使用。
また、idなどの取得はpropsで行なっていたが、RoutesではuseParamsでコンポーネントからidが取得できた。※下記のコード部

<Route path="/posts/edit/:id/" element={<EditPostForm />} />

子コンポーネント側での取得

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

let params = useParams();
console.log(params);

自分用なので中途半端やけど、以上。