タグ

React-Routerに関するsatoshieのブックマーク (3)

  • 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
  • React Router v4 の基本的な考え方と使い方 - 30歳からのプログラミング

    React Routerの使い方を学んでいく。 先月にv4がリリースされたので、それに準拠した内容を学んでいく。 ここで述べていることは正確な仕様とは異なる可能性が十分にあるので、正確なことを知りたい場合は公式のドキュメントを読みましょう。 React Router: Declarative Routing for React.js 何のためにReact Routerを使うのか 具体的な使い方に入る前に、そもそも何のためにReact Routerを使うのかを少し書いてみる。 聞きかじったり自分で考えたりしたものなので、これもまた、間違っている可能性が大いにあります。 SPAとは、ページ遷移を行わず単一ページでコンテンツの切り替えを行うウェブアプリケーションのこと。 ページの読み込みは最初の1回だけで、後はそのページのなかで、JavaScriptによって描画やAPIへのアクセスを行う。 この

    React Router v4 の基本的な考え方と使い方 - 30歳からのプログラミング
  • クエリパラメタをReactコンポーネントに渡すときはreact-routerが便利 - Qiita

    <!DOCTYPE html> <html> <head> <title>react-router demo</title> </head> <body> <!-- Reactアプリのマウントポイント !--> <div id="mount"></div> <script src="./app.js"></script> </body> </html> 下がapp.jsxの内容です。 ポイントはクエリ文字列を受け取りたいコンポーネントを<Router> と<Route>でかこむことです。 これによりprops.location.searchにクエリ文字列が格納されるので、コンポーネントに渡すことが出来ます。ただし、このままでは?query1=FirstQuery&query2=SecondQueryのように、クエリ文字列が処理されていない状態なので、queryStringを使ってパースして

    クエリパラメタをReactコンポーネントに渡すときはreact-routerが便利 - Qiita
  • 1