質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • React.js

    829questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

react-router 指定したページをリロードさせて遷移させたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 282

seiyan0426

score 3

 前提・実現したいこと

react、react-router-domを使用して指定したページへリロードさせて画面遷移を実施したいです。
※遷移元のページにてデータ登録し、遷移先のページへ移動時に登録した内容を確認出来るようにしたい

 発生している問題・エラーメッセージ

this.props.history.push(’ページ名’);
を使っており、指定したページへ遷移するのですが、リロードされた状態にて遷移されていないようです。
※遷移元のページにて登録したデータが存在しないため

Header.jsの「this.props.location('/DiaryFeed');」にて画面遷移を実施している。
DairyFeed.jsは、呼び出された時点で「const DiaryReportFeedData = graphql(ALL_DIARY_REPORTS)(DiaryFeed);」が実行される認識ですが、実行されていないため、遷移元のページにて登録したデータが存在しないのかと思います。

リロード(DairyFeed.jsのみ)して画面遷移させる方法を教えていただけないでしょうか?
もしくは、別の方法があれば教えてください。

 該当のソースコード

// Header.js
import React, { Component } from 'react';
import {
    AppBar, 
    Drawer,
    MenuItem,
    Divider,
    FlatButton,
    Avatar,
    Chip
    } from 'material-ui';
import { withRouter } from 'react-router';
import { Link } from 'react-router-dom';

import * as appConst from '../constans/appConst';

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            drawerOpenFlg: false,
        };
    }
    // ハンバーガーアイコンボタン押下イベントハンドラー
    onBtnLeftIconClick = () => {
        this.setState({ drawerOpenFlg: !this.state.drawerOpenFlg });
    };
    // メニューボタン押下イベントハンドラー
    onBtnMenuItem = (componentName) => {
        this.setState({ drawerOpenFlg: false });

        // 画面遷移 ★★ここの部分です★★
        switch (componentName) {
            // 日報フィード画面へ遷移
            case appConst.COMPONENT_NAME.DIARYFEED:
                this.props.history.push(appConst.PAGES.DIARYFEED);
                break;
            // マイページ画面へ遷移
            case appConst.COMPONENT_NAME.MYPAGE:
                this.props.history.push(appConst.PAGES.MYPAGE);
                break;
            default:
                break;
        }
    };
    // ログアウトボタン押下イベントハンドラー
    onBtnRightIconClick = () => {
        const userInfo = {
            id: '',
            email: ''
        };
        return this.props.fncSaveUserData(userInfo);
    };
    componentDidMount() {
    }
    render() {
        const emailAddress = this.props.emailAddress;
        let avatarChar = '';
        if (emailAddress) {
            avatarChar = emailAddress.slice(0,1).toUpperCase();
        }
        return (
            <div>
                {this.props.userId ? (
                    <AppBar
                        title="No DiaryReport No Life"
                        titleStyle={{ textAlign: "left", textShadow: "5px 5px 5px rgba(0, 0, 0, .8)" }}
                        onLeftIconButtonClick={this.onBtnLeftIconClick}
                        iconElementRight={
                            <div style={{ display: 'inline-block', verticalAlign: "top", whiteSpace: "nowrap" }}>
                                <Link to="/Login" style={{ textDecoration: "none" }}>
                                    <FlatButton label="ログアウト" labelStyle={{ fontWeight: "bold", color: "#fff", verticalAlign: "text-top" }} />
                                </Link>
                                <Chip
                                    style={{ margin: "4px", display: "inline-block", verticalAlign: "-webkit-baseline-middle" }}
                                >
                                    <Avatar
                                        size={32}
                                    >
                                        {avatarChar}
                                    </Avatar>
                                    {emailAddress}
                                </Chip>
                            </div>
                        }
                        onRightIconButtonClick={this.onBtnRightIconClick}
                        style={{position: "fixed"}}
                    />
                ) : (
                    <AppBar
                        title="No DiaryReport No Life"
                        titleStyle={{ textAlign: "center", textShadow: "5px 5px 5px rgba(0, 0, 0, .8)" }}
                        showMenuIconButton={false}
                        style={{position: "fixed"}}
                    />
                )}

                <Drawer
                    docked={false}
                    width={180}
                    open={this.state.drawerOpenFlg}
                    onRequestChange={(drawerOpenFlg) => this.setState({drawerOpenFlg})}
                    containerStyle={{ backgroundColor: "#212121" }}
                    zDepth={5}
                >
                    <p style={{ width: "180px", textAlign: "center", color: "#fff" }}>Menu</p>
                    <Divider style={{ backgroundColor: "#C8C8C8", marginTop: "5px", marginBottom: "5px", height: "1px" }} />
                    {/* <Link to="/DiaryFeed" style={{ textDecoration: "none" }}> */}
                        <MenuItem
                            style={{ color: "#fff", fontSize: "14px", textAlign: "center" }}
                            onClick={ () => this.onBtnMenuItem(appConst.COMPONENT_NAME.DIARYFEED) }
                        >
                        日報フィード
                        </MenuItem>
                    {/* </Link>
                    <Link to="/MyPage" style={{ textDecoration: "none" }}> */}
                        <MenuItem
                            style={{ color: "#fff", fontSize: "14px", textAlign: "center" }}
                            onClick={ () => this.onBtnMenuItem(appConst.COMPONENT_NAME.MYPAGE) }
                        >
                        マイページ
                        </MenuItem>
                    {/* </Link> */}
                </Drawer>
            </div>
        );
    }
}

export default withRouter(Header);

     

// appConst.js
// ページ定義
export const PAGES = {
    LOGIN: "/Login",
    MYPAGE: "/MyPage",
    DIARYFEED: "/DiaryFeed",
    ERROR: "/Error",
};

// コンポーネント名
export const COMPONENT_NAME = {
    MYPAGE: "MyPage",
    DIARYFEED: "DiaryFeed",
};

     

// DairyFeed.js
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import PropTypes from 'prop-types';
import { VelocityTransitionGroup } from 'velocity-react';

import * as appConst from '../constans/appConst';
import DiaryFeedItem from './DiaryFeedItem';
import Loading from './Loading';
import DiaryFeedItemNone from './DiaryFeedItemNone';

class DiaryFeed extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loadingFlg: true,
            displayContentFlg: false,
        };
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({ 
                loadingFlg: false,
                displayContentFlg: true
            })
        }, 1500);
    }
    render() {
        let gqlRet = '';
        // Graphcool接続エラー処理
        if (this.props.data.error) {
            console.log(this.props.data.error.message);
        }
        console.log(this.props);
        return (
            <div style={{ paddingTop: "50px", paddingLeft: "20px", paddingRight: "20px" }}>
                {this.state.displayContentFlg ?
                    <div>
                        {gqlRet}
                        <div style={{ paddingBottom: "50px" }}>
                            {this.props.data.allDiaryReports.length > 0 ?
                                this.props.data.allDiaryReports.map(diaryFeed => (
                                    <DiaryFeedItem key={diaryFeed.id} item={diaryFeed} userId={this.props.userId} />)) :
                                        <DiaryFeedItemNone /> 
                            }
                        </div>
                    </div>
                :
                undefined
                }
            </div>
        );
    }
}

// 全ユーザ日報一覧取得クエリ生成
export const ALL_DIARY_REPORTS = gql`
    query GetAllDiaryReports {
        allDiaryReports(orderBy: createdAt_DESC) {
            id
            title
            description
            likecount
            author {
                email
            }
            createdAt
            comments(orderBy: createdAt_ASC) {
                id
                createdAt
                commentdesc
                author {
                    email
                }
            }
        }
    }
`;

// プロパティ宣言
DiaryFeed.propTypes = {
    data: PropTypes.shape({
        loading: PropTypes.bool,
        error: PropTypes.object,
        allDiaryReports: PropTypes.array
    }).isRequired
};

const DiaryReportFeedData = graphql(ALL_DIARY_REPORTS)(DiaryFeed);

export default DiaryReportFeedData;
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • React.js

    829questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。