React Routerでパラメータを渡す方法

2019年3月31日

はじめに

React Routerでパラメータを渡す方法をメモします。
以下の2パターンの方法を試しました。
①http://localhost/hoge?year=2019&month=3
②http://localhost/hoge/year/2019/month/3

パターン①

const changePage = () => (dispatch) => {
    dispatch(push({
        pathname: '/hoge',
        search: "?" + new URLSearchParams({ year: 2019, month: 3 }),
        state: { value: 'something value' }
    }));
};

渡したパラメータは遷移先でpropsから取得できます。

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Child extends Component {
    render() {
        const { pathname, search, state } = this.props;
    }
}

const mapStateToProps = state => ({
    pathname: state.router.location.pathname,
    search: state.router.location.search,
    state: state.router.location.state
});

export default connect(mapStateToProps)(Child);

パターン②

React Routerで以下のように設定をしておきます。

<Route exact path="/hoge/year/:year/month/:month" component={Hoge} />
export const changePage = () => (dispatch) => {
    dispatch(push({
        pathname: '/hoge/year/2019/month/3/'
    }));
};

React Routerで:yearみたいなRoute Paramsした箇所は、遷移先でprops.match.paramsから取得できます。

class Hoge extends Component {
    render() {
        const { year, month } = this.props.match.params;
        console.log(year); // 2019
        console.log(month); // 3
    }
}

未分類React

Posted by ababa