Laravel環境でreactRouterのルーティングを使用できるようにする

前提

reactRouterとTypeScriptで使用するための定義ファイルのライブラリをインストールする。

$ npm i -D react-router-dom @types/react-router-dom

reactRouterの定義ファイルを作成する

touch resources/ts/router.tsx

import React from 'react'
import {
    BrowserRouter,
    Switch,
    Route,
    Link
} from "react-router-dom"
import TaskPage from './pages/hoges'

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/">
          <HogePage />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router

resources/ts/index.tsxへ下記を追記する

import Router from "./router"

ReactDom.render(
  <Router />
  document.getElementById('app')
)

現在LaravelのRouterと競合してhomeディレクトリへ遷移してもreactRouterのRouteが反映されないのでweb.phpを下記のように編集する

Route::get('{all}', function () {
    return view('index');
})->where(['all' => '.*']);

reactRouterで遷移できるようになりました！