38elements.github.io - React Routerメモ

React Routerメモ

38elements.github.io Spined HTML

React Routerメモ React Routerメモ React Routerメモ Github Document Applicationのroot要素はRooter系の要素にする 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になる word-for-word 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 redux-actionsメモ ≪Joiメモ Main React Reduxメモ≫