並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 67件

新着順 人気順

react-routerの検索結果1 - 40 件 / 67件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

react-routerに関するエントリは67件あります。 reactReacttechfeed などが関連タグです。 人気エントリには 『Merging Remix and React Router』などがあります。
  • Merging Remix and React Router

    We've been building a bridge. You can hear Ryan talk about this announcement at React Conf 🎥 For nearly 4 years we've been working on Remix, a fullstack framework built on web standards to help you build better websites and applications. React Router has always been Remix's largest dependency after React itself. The two projects are so closely aligned that we updated React Router to include Remix

      Merging Remix and React Router
    • to B プロダクトで Vite + React Router を採用して半年後の感想 / Impressions after 6 months of using Vite + React Router

      2024/02/28 「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった?〜」で発表したスライドです。 https://findy.connpass.com/event/310614/ 参照したURL - Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog - 「作ってから売る」と「売ってから作る」と「売れるようにしてから作る」 ~技術の社会実装のための『開発』~ - Speaker Deck - React プロジェクトを始める – React - フロントエンドの移り変わりは早すぎるのか Zenn

        to B プロダクトで Vite + React Router を採用して半年後の感想 / Impressions after 6 months of using Vite + React Router
      • React Router v5.1

        Today, we are releasing React Router version 5.1. This post will discuss the 5.1 release as well as discuss a few things you can do to prepare for the future. We are hard at work incorporating the best ideas from @reach/router, as well as community feedback about the 4/5 API, into version 6 which we expect will be ready sometime around the beginning of the new year. That being said, we are putting

          React Router v5.1
        • react-router 作り方

          history で自分だけの最強のルーターライブラリを作ろう! react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。 react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはまさに history ライブラリの実体を取得するための関数になっています。 ルーティングに関する以下の処理は history ライブラリ内部で行われています。 現在の URL から Location オブジェクトを作成する 履歴の操作を行う 履歴の変更を検知してコールバックを実行する react-router は React 用のインターフェイスを提供しているに過ぎません。 つまり、 history をベースに Re

            react-router 作り方
          • React Router v6のOutletとReact.lazyの組み合わせが便利

            React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。 最終的なサンプルコードはこちら。 使用したライブラリは次のとおりです。見た目がしょぼいとテンションが下がるので MUI で装飾していますが、本筋とは関係ないので今回は特に触れません。 react@18.0.0 react-dom@18.0.0 react-router-dom@6.3.0 @mui/material@5.9.3 @mui/icons-material@5.8.4 @emotion/react@11.10.0 @emo

              React Router v6のOutletとReact.lazyの組み合わせが便利
            • react-routerで現在のlocationを取得する2種類の方法の使い分け方 - uhyo/blog

              SPAを作る際は、URLを変化させたり、URLの変化に反応して画面を変えたりする必要があります。このために使われるのがルーティングライブラリです。Reactにおいては、react-routerが代表格として知られています。 react-routerでルーティングが制御されている場合、その中のコンポーネントが現在のURLを表すオブジェクトであるlocationを得るための方法は大別して2つあります。一つはuseLocation、もう一つはuseHistoryです。なお、これらのフックはreact-routerのv5.1で追加されました。この記事ではこれ以前の方法は取り扱いません。 この2つの方法のどちらを使ってもlocationを得ることは可能ですが、どちらを使うべきかは場合によって明確に異なります。間違った方を使うと、パフォーマンスが低下したり期待通りに動かなかったりという問題が発生するこ

                react-routerで現在のlocationを取得する2種類の方法の使い分け方 - uhyo/blog
              • React Routerはルートをどうランク付けしているか

                React Router とは React Router のルートのマッチング React Router のドキュメントのRanking Routesのセクションを例として説明します。 以下の 5 つのパスパターンを取り得るアプリケーションがあるとして、/teams/newというパスが与えられたときに、どのパスパターンがマッチするでしょうか。 [ "/", "/teams", "/teams/:teamId", "/teams/:teamId/edit", "/teams/new", ]; React Router はここからさらにルートをランク付けし、最終的に/teams/newを最もマッチするルートとして採用します。 どのようにルートをランク付けするか ランク付けというのは、ルートがどれだけパスにマッチするかを評価することです。React Router は、ルートのパスパターンと与えら

                  React Routerはルートをどうランク付けしているか
                • React Router v6.4はClient Side Remix

                  React Router v6.4 が、破壊的変更を伴わないマイナーバージョンアップながら、機能追加の内容としてはかなり新しい世界観を追加してきたので、5 分くらい眺めて気づいたことをメモしておきます。 Routing と Data Loading/Mutation の統合 まずはリリースノートがこちら。 そしてリリースノート内に貼り付けられている動画がこちら。 1:45 しかない動画なので、動画を見ていただければこの記事はあんまり読まなくてもいいかもです。 さて、動画内では、次の 2 つの機能を <Route> コンポーネントへと統合した話題が語られています。 データ読み込み(Data Loading) 0:00〜 0:28〜 エラーハンドリングの話題もあり データ更新(Data Mutation) 0:52〜 <Route> に統合された API は、ざっくりと次のような形です。 <R

                    React Router v6.4はClient Side Remix
                  • TS 4.9 satisfies operator を使って React Router のナビゲーションを型安全にしてみる - Mobile Factory Tech Blog

                    BC チームでエンジニアをしている id:d-kimuson です 11月にリリースされた TypeScript 4.9 から satisfies operator が追加されました。satisfies operator が追加されたことで 「React Router でのナビゲーションを型安全にする」がやりやすくなったのでやってみました この記事で紹介するコードは TS Playground で試すことができます React Router v6.4 からオブジェクト形式でルーティングをかけるようになり、ルーティング宣言から型を拾いやすくなった React Router v6.4 から createXXXRouter のAPIが追加され、コンポーネントではなく、プレーンオブジェクトでルーティングを書けるようになりました import { createBrowserRouter } from

                      TS 4.9 satisfies operator を使って React Router のナビゲーションを型安全にしてみる - Mobile Factory Tech Blog
                    • React Router-ing Remix

                      Earlier this year we started an undertaking to Remix React Router with the aim of bringing all of the Remix Data API's (loaders, actions, fetchers, etc.) over to React Router. With the recent release of React Router v6.4.0 we're proud to report that we've completed that effort...and we think we've made them even better 😃. Not only have we fixed a few edge case bugs, but we've stabilized some APIs

                        React Router-ing Remix
                      • Remixing React Router

                        The first versions of React Router actually had an async hook to help with data loading called willTransitionTo. Nobody really knew how the heck to use React at the time and we were no exception. It wasn't great, but it was at least going in the right direction. For better or for worse, we went all in on components for React Router v4 and removed the hook. With willTransitionTo gone, and component

                          Remixing React Router
                        • React Router v6のルーティング方法を解説 - createBrowserRouterとData APIsの活用法 | DevelopersIO

                          こんにちは、戸田です。 今回は React Router v6.4 以降を使用する際にどのルーティング方法を使えばいいのか自分の言葉でブログにまとめました。 まず結論 シンプルなルーティングのBrowserRouterかcreateBrowserRouterで迷ったら基本的にcreateBrowserRouterを使いましょう! 以下がサンプルコードです。 import React from 'react'; import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom'; const Parent = () => { return ( <div> <h1>Parent</h1> <Outlet /> </div> ) } const App = () => { const router = cr

                            React Router v6のルーティング方法を解説 - createBrowserRouterとData APIsの活用法 | DevelopersIO
                          • 2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023

                            JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React

                              2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
                            • React Router v6: 変更点とv5との違いを初学者向けに詳しく解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ

                              はじめに React Routerとは何ですか? React Router v6 スイッチコンポーネントをルートに置き換え 相対パスとリンク 正確なルートパスを指定するNavLink useNavigateに置き換え 最後に はじめに React Router v6は最新のバージョンであり、最近React Routerを学習し始めた方々にとっては、既にこのバージョンを使用しているかもしれません。 v6には多くの変更点が加えられており、v5との違いや変更点について初心者の方々に詳しく説明していきます。 以前の記事では、React Router v6でのルーティングの解説を行っていました。 dev-k.hatenablog.com ただし、この記事はReact Router v6が最近アップグレードされたばかりの頃に書かれたものであり、現在の最新情報とは異なる可能性があります。 そのため、読者

                                React Router v6: 変更点とv5との違いを初学者向けに詳しく解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
                              • React Router v5.1 で導入された Hooks API について - 30歳からのプログラミング

                                React Router のv5.1で Hooks API が導入された。 reacttraining.com URL パラメータやhistoryオブジェクトなどを、より簡単に取得できるようになった。 これまでの書き方も使えるが、今後のバージョンアップで非推奨になる可能性が高いとのことなので、今のうちに Hooks を使った書き方に慣れておいたほうがいいかもしれない。 個人的にはwithRouterを使わなくてもよくなるのが便利だと感じた。 この記事の内容は以下のバージョンで動作確認している。 react@16.10.2 react-router-dom@5.1.2 今回導入された API は以下の4つ。 useParams useLocation useHistory useRouteMatch コードを見ると、どれもReact.useContextを使って実装している模様。 react

                                  React Router v5.1 で導入された Hooks API について - 30歳からのプログラミング
                                • 今から始めるReact入門 〜 React Router - Qiita

                                  目次 今から始めるReact入門 〜 React の基本 今から始めるReact入門 〜 React Router 編 ←★ここ 今から始めるReact入門 〜 flux編 今から始めるReact入門 〜 Redux 編: immutability とは 今から始めるReact入門 〜 Redux 編: Redux 単体で状態管理をしっかり理解する 今から始めるReact入門 〜 Redux 編: Redux アプリケーションを作成する 今から始めるReact入門 〜 Mobx 編 Single Page Application (SPA)について 今回はreact-router を使用して宣言的記法を利用したSingle Page Application (SPA) の作成について勉強していきたいと思います。 React Router はUI とURL を同期させるライブラリで、例えば閲

                                    今から始めるReact入門 〜 React Router - Qiita
                                  • React Router v6 Preview

                                    The next major version of React Router, version 6, is just around the corner. We published the first alpha release back in January, and we released another alpha last week. For version 6, I'm using "alpha" to mean "not yet feature complete". I also anticipate having some minor breaking changes between alphas as we nail down the final APIs. For these reasons, I've been hesitant to publish anything

                                      React Router v6 Preview
                                    • React Router v6 はじめでもわかるルーティングの設定方法の基礎 | アールエフェクト

                                      複数のページで構成されたReactアプリケーションを構築する際にはReact単独ではルーティングの機能をもっていないためルーティングライブラリが必要となります。数あるルーティングライブラリの中でReact Routerは最も人気の高いライブラリです。複数のページを持つということはブラウザからアクセスするためのURLが複数存在することになります。アプリケーションを構成するURLにアクセスした場合にどのページコンポーネントのコンテンツを表示させるのかといったルーティングの設定をReact Routerを利用して行います。ログインページやユーザ登録ページなど複数のページが必要なアプリケーションをReactを利用して構築したい場合にはReact Routerを利用することになります。 通常のWEBサーバではページを移動する度にサーバから送られてくるコンテンツをブラウザ上に描写させるためページ全体の

                                        React Router v6 はじめでもわかるルーティングの設定方法の基礎 | アールエフェクト
                                      • react-router v6.4 で比較的型安全なルーティングを実現することで管理を楽にする

                                        import { BrowserRouter, ParamParseKey, Route, Routes, useParams } from "react-router-dom"; import User from "./pages/users/[id]"; import "./App.css"; import Top from "./pages/top"; export const PATHS = { TOP: "/", ABOUT: "/about", USERS_ID: "/users/:id", } as const; // これでクエリパラメータの id が取り出せる export const useParamsUsersId = useParams<ParamParseKey<typeof PATHS.USERS_ID>>; function App() { return (

                                          react-router v6.4 で比較的型安全なルーティングを実現することで管理を楽にする
                                        • React Router v6

                                          Today we are very happy to announce the stable release of React Router v6. This release has been a long time coming. The last time we released a major breaking API change was over four years ago in March 2017 when we released version 4. Some of you probably weren't even born then. Needless to say, a LOT has happened since that time: Downloads of React Router grew by over 60x (6000%) from 340k/mont

                                            React Router v6
                                          • React RouterがHooks対応したので使い方を整理する - Qiita

                                            概要 ReactRouterがv5.1でHooks対応しました 以前 react-router + React Hooks という記事で use-react-router の使い方を紹介しました ですが、ReactRouter本体がHooks対応したのでこれから作る場合はこの記事のやり方で実装していくことになります サンプルコード ReactRouterのHooksを使った簡単なサンプルです mkdir react-router-with-hook cd react-router-with-hook yarn init -y yarn add react react-dom react-router-dom touch index.html index.js import React from 'react'; import ReactDOM from 'react-dom'; impor

                                              React RouterがHooks対応したので使い方を整理する - Qiita
                                            • ルーティングライブラリ、React Router(v5)入門

                                              前回は React の基礎的なことをまとめましたが、今回は React アプリのルーティング設定をするうえでよく使われている React Router についてまとめました。 ※2021/08/22追記 TypeScript ベースで、全体的に大幅加筆修正を行いました。 ※2022/01/24追記 あくまでライブラリの記事であるとわかりやすくするために、記事タイトルを変更しました(旧:React入門 ~React Router(v5)編~) React Router とは? 公式 5系 React で SPA を書くにあたって、DOM を書き換えて複数ページがあるように見せても URL が変わらないため、ブラウザからは1つのページとしてしか認識されません。 そこで、SPA の画面状態と URL とを紐づけ、さらにブラウザ履歴の同期を行います。 そうすることで、疑似的なページ遷移を実現できま

                                                ルーティングライブラリ、React Router(v5)入門
                                              • Hooks Introduced in React-Router v5.1

                                                I am always excited when there is a new release of any of my favourite libraries/frameworks/languages, At about 6 pm yesterday while scrolling through twitter I saw that a new version of react-router was released so I went to look it up and the react-router team added some really nice new API's and functionality. The react-router team added to the ongoing React hooks buzz by releasing some hooks A

                                                  Hooks Introduced in React-Router v5.1
                                                • 大きく機能が変わる?React Router v6.4 Pre-releaseをためしてみた | DevelopersIO

                                                  React Routerがv6.4で再び大きく変化するようです。まるでReactがCSR版のRemixになる?まず素振りがてらPre−release版をためしてみました。 はじめに こんにちは、CX事業本部MAD事業部の森茂です。 React Routerがv6.4で再び大きく変化するようです。3月末に下記Remix公式ブログで事前の案内はありましたがReact Routerと同じチームが開発しているRemixの思想がReact Routerに取り込まれ、そのPre-release版とData APIについてのドキュメントが先日先行して公開されました。 Release Remixing React Router · remix-run/react-router React Routerの安定版は2022年6月現在 v6.3.0となります。 React Router v6.4 Pre-rel

                                                    大きく機能が変わる?React Router v6.4 Pre-releaseをためしてみた | DevelopersIO
                                                  • React: React Router v6 でルーティングする step1

                                                    2022年01月28日 Windows11での情報です。 今回はReactでのルーティングについてです。 ルーティングとはリクエストされたURLに応じて処理を振りわけることです。 Reactでルーティングを実装するには、React Routerライブラリを利用するのがスタンダードなようです。 環境 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-router-dom: v6.2.1 React Router v6 React Router は現在の最新はv6です。 v5とは書き方が変わったようですので、検索する際はバージョンの確認が必要です。 公式サイト React Router v6 をインストール まずはReact Routerをインストールします。 vscodeのターミナルで下記のコマンドを実行し

                                                      React: React Router v6 でルーティングする step1
                                                    • Build a react-router clone from scratch

                                                      React router is a package that I use in almost all of my projects. Not too long ago, Michael Jackson tweeted this. This made me curious as to how difficult it would be to rebuild react router from scratch. Before we dig into this I want to clarify that if you need a router in your project you should just use react router. It has a lot more features, handles a lot more edge cases and is incredibly

                                                        Build a react-router clone from scratch
                                                      • 【2024年】React Router & TanStack Router比較

                                                        先日RemixとReact Routerがマージされ、React Routerv7で統合されるという衝撃的なニュースがありました。 React RouterはこれまでSPA開発におけるルーティングライブラリとして広く活躍してきました。しかし今回の統合の背景にReact Router自体がすでにRemixとの差分が無くなっていたという事情があったことからも分かる通り、React Routerは直感的にルーティングの域を超えた存在です。 またFrameworkを採用せずReactでSPA開発をする際にはReact Routerの存在は大きいものでしたが、昨年の12月にTanStack Routerがversion1系になったことでVite+Reactでルーティングを実装する選択肢が新たに1つ増えました。 TanStack Routerについてご存知でない方はこちらの記事で詳しく紹介をしています

                                                          【2024年】React Router & TanStack Router比較
                                                        • react-router@v6で何が変わるのか - Qiita

                                                          まさかこの「誰よりも先駆けて使い方を解説!」な記事を書いてから1年半もかかると思ってなかったのですが(笑)、ついにv6出ましたね。 https://github.com/remix-run/react-router/releases/tag/v6.0.0 はじめに ReactでSPAを作るときのおそらくデファクトスタンダードであろうreact-routerですが現在v6が開発中で、しばらくしたら単純にnpm install react-routerとするとv6がインストールされるようになります。 v6はAPIに破壊的な変更が入ります。つまり、今ある入門記事の通りに書いても動かなくなります。 というわけでこの記事では書き方がどう変わるか、そして個人的により重要な中身がどう変わったのかについて説明します。 第1部:書き方の変更編 v5での書き方 まずは前提知識としてv5での書き方です1。すでに

                                                            react-router@v6で何が変わるのか - Qiita
                                                          • The Hooks of React Router | CSS-Tricks

                                                            React Router 5 embraces the power of hooks and has introduced four different hooks to help with routing. You will find this article useful if you are looking for a quick primer on the new patterns of React Router. But before we look at hooks, we will start off with a new route rendering pattern. Before React Router 5 // When you wanted to render the route and get router props for component <Route

                                                              The Hooks of React Router | CSS-Tricks
                                                            • Tutorial v6.24.0 | React Router

                                                              Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in the app! The rest is just there for your information and deeper understanding. Let's get to it. Setup If you're not going to follow along in your ow

                                                                Tutorial v6.24.0 | React Router
                                                              • SPAにおけるルーティング〜React Router初歩 - Qiita

                                                                はじめに Reactで開発を進める上で必ずと言っていいほど使用されているReact Router。 ドキュメントが充実しているので、目を通せば大体のことは、解決すると思いますが、使い方の整理の意味を込めて文章としてまとめます。 公式ドキュメント | React Router 対象読者 React初学者 SPAにおけるルーティングのおさらい さらっとですが、SPAにおけるルーティングについて整理します。 ※ここら辺、理解してる人は読み飛ばして下さい。 SPAにおけるルーティングを一言で説明すると、『DOMの動的な書き換えによってページ遷移を擬似的に実現するとともに、ブラウザのセッション履歴をそれに同期させる事』 です。 SPAはサーバーへの初回リクエストに対して、アプリ全体が記述されたJSのコードと、そこで使用されるアセットファイルがごそっと返されます。 以降、ページ遷移はアプリが動的にDO

                                                                  SPAにおけるルーティング〜React Router初歩 - Qiita
                                                                • Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router | TanStack Query React Docs

                                                                  Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router This comparison table strives to be as accurate and as unbiased as possible. If you use any of these libraries and feel the information could be improved, feel free to suggest changes (with notes or evidence of claims) using the "Edit this page on Github" link at the bottom of this page. Feature/Capability Key: ✅ 1st-class, bui

                                                                    Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router | TanStack Query React Docs
                                                                  • 入門者でもわかるReact Routerを利用したルーティング設定の基礎 | アールエフェクト

                                                                    React Routerは複数のページを持つReactアプリケーションを構築する際に利用されるライブラリです。複数のページが存在するということはブラウザからアクセスするためのURLが複数存在することになります。レイアウトなどの共通部分もありますがページ毎に異なるコンポーネントで構成されているためURLとコンポーネントを紐づける仕組みが必要となります。その役割を担うのがReact Routerです。React Routerを利用することで例えばブラウザからURLの/aboutにアクセスするとAboutコンポーネントの内容を表示、別のURLである/contactにアクセスするとContactコンポーネントの内容を表示させるといったことが可能になります。 また通常のHTMLでのページ間の移動ではページを移動する度にブラウザからサーバにリクエストを送り、サーバからHTMLを受け取りページ全体を描写

                                                                      入門者でもわかるReact Routerを利用したルーティング設定の基礎 | アールエフェクト
                                                                    • React Query meets React Router

                                                                      React Query meets React Router28.08.2022 — ReactJs, React Query, React Router, TypeScript, JavaScript — 6 min read Remix is changing the game, and they are bringing their data fetching concepts (loaders and actions) to purely client side rendered applications with React Router 6.4. I went through their great tutorial that shows the concept very well and demonstrates how you can quickly build a sma

                                                                        React Query meets React Router
                                                                      • React Router 6.4 Release

                                                                        After several months of development, the data APIs from Remix have arrived for React Router in v6.4. Feature Overview The web is a wonderful place where highly dynamic shopping experiences, creative productivity software, and super basic but excellent classified ads are all possible on the same platform. While these websites are all wildly different, they all have one thing in common: data coupled

                                                                          React Router 6.4 Release
                                                                        • Hookにも対応!Vue.jsエンジニアのためのReact Router v5入門 | Hypertext Candy

                                                                          この記事では、React コミュニティにおけるルーティングライブラリのデファクトスタンダード React Router の基本的な機能を紹介します。 以前の記事『Vue.jsエンジニアのためのReact入門』と同様に、主に Vue Router をひととおり学習した方向けに、React Router ならどうやるのか?という視点でまとめます。 とはいえ前記事よりはゆるい比較なので、Vue Router 知らない方でも React Router の入門として読めると思います。 ルーティングライブラリとは Vue Router 知っている皆さんには説明不要かもしれませんが、おさらいです。 Vue Router も React Router も、「ルーティングライブラリ」と呼ばれます。 ルーティングライブラリは、SPA(Single Page Application)には欠かせない存在で、紙芝居

                                                                          • Home v6.22.3 | React Router

                                                                            What's New in 6.4?v6.4 is our most exciting release yet with new data abstractions for reads, writes, and navigation hooks to easily keep your UI in sync with your data. The new feature overview will catch you up. I'm NewStart with the tutorial. It will quickly introduce you to the primary features of React Router: from configuring routes, to loading and mutating data, to pending and optimistic UI

                                                                              Home v6.22.3 | React Router
                                                                            • [React Router] URLクエリストリングを取得する

                                                                              React Router(v5)を使っていて、http://localhost:3000/books?hoge=1111&fuga=aiueoというようなURLのクエリストリング?hoge=1&fuga=aiueoを取得する方法をいくつか試してみました。なお、TypeScriptで実装しています。 自力で取得する searchには?hoge=1111&fuga=aiueoというような文字列がセットされています。この文字列を操作して無理やり取得してみました。何かものすごく制約がない限り、これは採用しないと思います。 import React from 'react'; import { useLocation } from 'react-router-dom'; interface QueryString { [key: string]: string; } const Books: Rea

                                                                                [React Router] URLクエリストリングを取得する
                                                                              • React Routerでルーティングを実装しよう - Qiita

                                                                                React Routerとは React Routerとは、Reactを用いて作成したSPA(Single Page Application)に対して、UIとURLを対応づけるためのライブラリです。 例えばTodoアプリの場合、http://sample.com/loginにアクセスした時にはログインページを表示するLoginコンポーネントをレンダリングし、http://sample.com/todoにアクセスした時にはTodo一覧を表示するTodoListコンポーネントをレンダリングするといった操作が可能になります。 ライブラリ React Routerを使用するためには、作成しているアプリケーションにライブラリのインストールが必要です。React Routerに関係するライブラリにはいくつか種類があるので、用途に合わせてどのライブラリが必要なのか抑えておく必要があります。 ライブラリ

                                                                                  React Routerでルーティングを実装しよう - Qiita
                                                                                • 2022年中にreact-router-domの理解を深めたい - Qiita

                                                                                  この記事は、Ateam LifeDesign Advent Calendar 2022 シリーズ1の8日目の記事です。 はじめに react-router-domについて、ふわっと理解していた部分がありました。 このまま年を越すには、どうも気持ちが落ち着かない。。。 というわけこの際、1から全部実装して動作を確認していこうと思います。 React Routerって何? Reactで作成したSPAに、UIとURLを紐づけるためのものです。 http://localhost:3000/top にアクセス -> Topコンポーネントを返す http://localhost:3000/todo にアクセス -> Todoコンポーネントを返す といった事ができます。 今回やること 今回はルーティングを確認したいので、react-router-dom を使用します。 react-router-domは

                                                                                    2022年中にreact-router-domの理解を深めたい - Qiita

                                                                                  新着記事