React Routerメモ

Github
Document

• Applicationのroot要素はRooter系の要素にする

• configファイルでroute構造を定義する例 *

Link *

• Linkでrender()内で遷移処理を作成する

• aタグに渡すようなpropsを指定することができる *

to prop *

replace prop *

innerRef prop *

NavLink *

Linkにstyleの設定を加えたもの

Route *

• Routeで子コンポーネントを表す

• 子コンポーネント(Route)はmatch, location, historyをpropsに持つ *
  これらはcomponent、render、childrenの3つのrender関数に引数として渡される *
  component propに渡されたコンポーネントにも渡される

• pathがないものがデフォルト

• beforeのような処理はRouteをラップする *

const FooRoute = ({ component, ...props }) => (
  <Route {...props} render={props => (
      bar ? (
        React.createElement(component, props)
      ) : (
        <Redirect to={ pathname: '/login', state: { from: props.location } } />
      )
    )}
  />
)

• 再帰的にRouteを設定する方法 *
  pathに現在のurlとさらにpathを付与したものを追加している
  componentにはRouteを内包するコンポーネントを指定している

component prop *

• component propにインライン関数を渡してはいけない *
  renderに渡す

• matchした時のみ実行

• Routeのpropsを受け取る

render prop *

• Routeのpropsを引数で受け取る

• matchした時のみ実行

children prop *

• Routeのpropsを引数で受け取る

• 常に実行される

path prop *

• path-to-regexpのパターン

• 指定しない場合はデフォルトのRouteになる

exact prop *

• props.pathとlocation.pathnameが一致する場合のみマッチするようにする

strict prop *

• マッチの判定に末尾の/を考慮するかどうか

location prop *

sensitive prop *

• マッチの判定にpathの大文字小文字を考慮するかどうか

location *

• locationは下記のようにすることで書き換えることができる
  設定したlocationが適用される
  https://reacttraining.com/react-router/web/example/modal-gallery

<Router location={location}/>
<Switch location={location}/>

match *

• match.urlは自分自身が紐づいている部分url
  もし、/foo/barに紐づいていて現在の状態が/foo/bar/bazだったら
  match.urlは/foo/bar

• <Route path="/:id" component={Child}/>でmatch.params.idでパラメータを取得することができる

history *

• repositoryはhistory

• Routerのpropsにセットする *

• history.location.stateはhistory.push(path [,state])のstate

• history.push(path, [state])やhisotry.go(n)でプログラムから遷移を制御することができる。

redux-actionsメモ