React/ページ遷移
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-[[React入門 ～React Router編～:https://zenn.dev/h_yoshik...
-[[【React初心者】 #3 ルーティング・ページ遷移を作る！ re...
-[[React Router - react-routerを使ってReact(リアクト)でペ...
-[[connected-react-routerでSPAの描画をURLで切り替える:htt...
-[[綺麗なReactコンポーネント設計でモノリシックなコンポー...
-[[Reactで使う有名なコンポーネントデザインパターン:https:...
*React Router [#ce5108d4]
-Reactのためのルーティングライブラリ
-History APIとの連携や、ルーティングに応じたコンポーネン...
-React Router ではルーティングをコンポーネントによって定...
-コンポーネントをネストすることで、ネストしたルーティング...
-子のルーティングは props.children に渡される。これにより...
-ページ遷移には、React Router が提供する Link や、browser...
-React Router は、ルーティングの状態に応じた処理が定義で...
--getComponent ... ルーティングに応じて必要なコンポーネン...
--onEnter ... 認可処理などの前処理をしてからコンポーネン...
--onChange
--onLeave
-React Router はミドルウェアとしての仕組みも持っている
--[[react-router-scroll:https://github.com/taion/react-ro...
*React Router ver.4 [#u10d22bd]
-[[React Router v4の変更点:http://qiita.com/yutasuzuki/it...
-[[react-router@v4対応したので雑に晒す:http://qiita.com/J...
-[[【react-router@3.x→4.x】動かない。。アップデートで困っ...
-[[【react-router@3.x→4.x】動かない。。アップデートで困っ...
-[[notes in migrating from React-Router-3 to React-Router...
-Ver.4 で仕様が結構変わっている！！
--以前はreact-routerからimportする仕様だったが、v4はwebと...
---webの場合は react-router-dom
---nativeの場合は react-router-native
--URL起因のパラメータ周りの呼び方変更 this.props.params -...
--Route定義がしれっと無名関数になってる
--browserHistoryの取り扱い
---ver.3
import { Router, Route, IndexRoute, IndexLink, browserHi...
:
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Top} />
<Route path='hoge' component={Hoge} />
</Route>
</Router>
---ver.4
import { Route, BrowserRouter } from 'react-router-dom';
:
<BrowserRouter>
<div>
<Route exact={true} path='/' component={Top}/>
<Route path='hoge' component={Hoge}/>
</div>
</BrowserRouter>
--IndexRedirectがなくなり、相対パスでなく絶対パス？
---ver.3
<Route path="/one">
<IndexRedirect to="1" />
<Route path="1" component={First} />
<Route path="2" component={Second} />
</Route>
---ver.4
<Route path="/one">
<Switch>
<Route exact path="/one/1" component={First} />
<Route exact path="/one/2" component={Second} />
<Redirect to="/one/1" /> <== パスがマッチしなかった...
</Switch>
</Route>
-破壊的な変更もあるので、v3で作ったものを無理やり乗せかえ...
-マニュアル ... これをしっかり読んで対応すべし！
--[[React Router DOM:https://reacttraining.com/react-rout...
--[[React Router Native:https://reacttraining.com/react-r...
-ver.4 へのアップデート
$ npm un -S react-router && npm i -S react-router-dom
*[[React Navigation:https://reactnavigation.org/]] [#r5eb...
-[[React Navigationで画面遷移を実現する:https://codezine....
-[[【ReactNative】+【Expo】+【ReactNavigation】でページ遷...
-[[React NativeでReact Navigationを使用したルーティングの...
-[[React-Navigatorを利用してみる（基礎編）:https://qiita....
終了行:
-[[React入門 ～React Router編～:https://zenn.dev/h_yoshik...
-[[【React初心者】 #3 ルーティング・ページ遷移を作る！ re...
-[[React Router - react-routerを使ってReact(リアクト)でペ...
-[[connected-react-routerでSPAの描画をURLで切り替える:htt...
-[[綺麗なReactコンポーネント設計でモノリシックなコンポー...
-[[Reactで使う有名なコンポーネントデザインパターン:https:...
*React Router [#ce5108d4]
-Reactのためのルーティングライブラリ
-History APIとの連携や、ルーティングに応じたコンポーネン...
-React Router ではルーティングをコンポーネントによって定...
-コンポーネントをネストすることで、ネストしたルーティング...
-子のルーティングは props.children に渡される。これにより...
-ページ遷移には、React Router が提供する Link や、browser...
-React Router は、ルーティングの状態に応じた処理が定義で...
--getComponent ... ルーティングに応じて必要なコンポーネン...
--onEnter ... 認可処理などの前処理をしてからコンポーネン...
--onChange
--onLeave
-React Router はミドルウェアとしての仕組みも持っている
--[[react-router-scroll:https://github.com/taion/react-ro...
*React Router ver.4 [#u10d22bd]
-[[React Router v4の変更点:http://qiita.com/yutasuzuki/it...
-[[react-router@v4対応したので雑に晒す:http://qiita.com/J...
-[[【react-router@3.x→4.x】動かない。。アップデートで困っ...
-[[【react-router@3.x→4.x】動かない。。アップデートで困っ...
-[[notes in migrating from React-Router-3 to React-Router...
-Ver.4 で仕様が結構変わっている！！
--以前はreact-routerからimportする仕様だったが、v4はwebと...
---webの場合は react-router-dom
---nativeの場合は react-router-native
--URL起因のパラメータ周りの呼び方変更 this.props.params -...
--Route定義がしれっと無名関数になってる
--browserHistoryの取り扱い
---ver.3
import { Router, Route, IndexRoute, IndexLink, browserHi...
:
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Top} />
<Route path='hoge' component={Hoge} />
</Route>
</Router>
---ver.4
import { Route, BrowserRouter } from 'react-router-dom';
:
<BrowserRouter>
<div>
<Route exact={true} path='/' component={Top}/>
<Route path='hoge' component={Hoge}/>
</div>
</BrowserRouter>
--IndexRedirectがなくなり、相対パスでなく絶対パス？
---ver.3
<Route path="/one">
<IndexRedirect to="1" />
<Route path="1" component={First} />
<Route path="2" component={Second} />
</Route>
---ver.4
<Route path="/one">
<Switch>
<Route exact path="/one/1" component={First} />
<Route exact path="/one/2" component={Second} />
<Redirect to="/one/1" /> <== パスがマッチしなかった...
</Switch>
</Route>
-破壊的な変更もあるので、v3で作ったものを無理やり乗せかえ...
-マニュアル ... これをしっかり読んで対応すべし！
--[[React Router DOM:https://reacttraining.com/react-rout...
--[[React Router Native:https://reacttraining.com/react-r...
-ver.4 へのアップデート
$ npm un -S react-router && npm i -S react-router-dom
*[[React Navigation:https://reactnavigation.org/]] [#r5eb...
-[[React Navigationで画面遷移を実現する:https://codezine....
-[[【ReactNative】+【Expo】+【ReactNavigation】でページ遷...
-[[React NativeでReact Navigationを使用したルーティングの...
-[[React-Navigatorを利用してみる（基礎編）:https://qiita....
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
