react-routerを使ったアプリ内遷移の方法 / historyはどう取得するのが良いか

react react-router

Reactで作ったWebアプリケーションではルーティングの管理や開発に、react-routerを使用することが一般的かと思います。今回は、react-routerを使ったWebアプリケーションでのアプリ内遷移の方法をまとめます。 react-routerを使ったアプリ内遷移方法まず…

2020-07-23

create-react-appでTypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

create-react-app react react-scripts

しばらくいじっていないcreate-react-appで作ったフロントエンドのアプリケーションをローカル起動させたらこんなエラーが。 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (intern…

2020-06-24

【1分設定】create-react-appで作ったアプリケーションにSassを入れる

react sass scss create-react-app

数年ぶりにcreate-react-appでフロントエンドのアプリを開発したんですが、Sassの入れ方がカンタンになってたのでまとめます。結論ですが、node-sassを入れて、scssファイルを作り、読み込ませたいコンポーネントに直接importしてあげるだけです。執筆時の…

2018-11-03

IE11で画面を行き来するアプリケーションでAPIが呼ばれず画面の情報が古いまま表示される

IE対応 react redux-saga

タイトルのとおりの事象が発生。IE11でreact, redux-sagaの構成のフロントアプリケーションで外部アプリケーションからのwindow.location.hrefでの遷移時になぜか最新の情報が画面にレンダリングされない、、、というところから調査スタート。 safari, chrom…

2018-07-23

IE11でURLSearchParamsを使った処理でエラーが発生する

javascript react IE対応

developer.mozilla.orgURLSearchParams APIは、URLの細々した操作を簡略化してくれるもので自分がIEでぶちあたったのはx-www-form-urlencoded形式でAPIをコールする箇所でした。こんな感じで使ってた。 const params = new URLSearchParams(); params.appen…

2018-07-11

react-reduxアプリケーションにSentryを導入する

react redux redux-saga sentry フロントエンド

react-reduxのアプリケーションにSentryを導入していきましょう。サンプルのプロジェクトはcreate-react-appを使用して下記の条件で作っています。 "react": "^16.4.1", "react-dom": "^16.4.1", "react-redux": "^5.0.7", "react-scripts": "1.1.4", "redux…

2018-07-11

IE11でreact-scripts-tsを使ったreactアプリケーションで画面が真っ白になる

typescript IE対応 react

こちらの記事で諸々まとめてくれている。 medium.com最終的に記事を書いた人がreact-scripts-tsに向けて修正プルリク投げてそれがマージされているのでバージョンアップすれば解決します。 github.com 対応はシンプルでreact-scripts-tsのバージョンを2.16.0…