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

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

新規登録して質問してみよう
ただいま回答率
85.48%
React.js

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

Q&A

解決済

1回答

6035閲覧

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

seiyan0426

総合スコア16

React.js

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

0グッド

1クリップ

投稿2018/06/18 15:26

編集2018/06/20 14:40

前提・実現したいこと

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のみ)して画面遷移させる方法を教えていただけないでしょうか?
もしくは、別の方法があれば教えてください。

該当のソースコード

JavaScript

1// Header.js 2import React, { Component } from 'react'; 3import { 4 AppBar, 5 Drawer, 6 MenuItem, 7 Divider, 8 FlatButton, 9 Avatar, 10 Chip 11 } from 'material-ui'; 12import { withRouter } from 'react-router'; 13import { Link } from 'react-router-dom'; 14 15import * as appConst from '../constans/appConst'; 16 17class Header extends Component { 18 constructor(props) { 19 super(props); 20 this.state = { 21 drawerOpenFlg: false, 22 }; 23 } 24 // ハンバーガーアイコンボタン押下イベントハンドラー 25 onBtnLeftIconClick = () => { 26 this.setState({ drawerOpenFlg: !this.state.drawerOpenFlg }); 27 }; 28 // メニューボタン押下イベントハンドラー 29 onBtnMenuItem = (componentName) => { 30 this.setState({ drawerOpenFlg: false }); 31 32 // 画面遷移 ★★ここの部分です★★ 33 switch (componentName) { 34 // 日報フィード画面へ遷移 35 case appConst.COMPONENT_NAME.DIARYFEED: 36 this.props.history.push(appConst.PAGES.DIARYFEED); 37 break; 38 // マイページ画面へ遷移 39 case appConst.COMPONENT_NAME.MYPAGE: 40 this.props.history.push(appConst.PAGES.MYPAGE); 41 break; 42 default: 43 break; 44 } 45 }; 46 // ログアウトボタン押下イベントハンドラー 47 onBtnRightIconClick = () => { 48 const userInfo = { 49 id: '', 50 email: '' 51 }; 52 return this.props.fncSaveUserData(userInfo); 53 }; 54 componentDidMount() { 55 } 56 render() { 57 const emailAddress = this.props.emailAddress; 58 let avatarChar = ''; 59 if (emailAddress) { 60 avatarChar = emailAddress.slice(0,1).toUpperCase(); 61 } 62 return ( 63 <div> 64 {this.props.userId ? ( 65 <AppBar 66 title="No DiaryReport No Life" 67 titleStyle={{ textAlign: "left", textShadow: "5px 5px 5px rgba(0, 0, 0, .8)" }} 68 onLeftIconButtonClick={this.onBtnLeftIconClick} 69 iconElementRight={ 70 <div style={{ display: 'inline-block', verticalAlign: "top", whiteSpace: "nowrap" }}> 71 <Link to="/Login" style={{ textDecoration: "none" }}> 72 <FlatButton label="ログアウト" labelStyle={{ fontWeight: "bold", color: "#fff", verticalAlign: "text-top" }} /> 73 </Link> 74 <Chip 75 style={{ margin: "4px", display: "inline-block", verticalAlign: "-webkit-baseline-middle" }} 76 > 77 <Avatar 78 size={32} 79 > 80 {avatarChar} 81 </Avatar> 82 {emailAddress} 83 </Chip> 84 </div> 85 } 86 onRightIconButtonClick={this.onBtnRightIconClick} 87 style={{position: "fixed"}} 88 /> 89 ) : ( 90 <AppBar 91 title="No DiaryReport No Life" 92 titleStyle={{ textAlign: "center", textShadow: "5px 5px 5px rgba(0, 0, 0, .8)" }} 93 showMenuIconButton={false} 94 style={{position: "fixed"}} 95 /> 96 )} 97 98 <Drawer 99 docked={false} 100 width={180} 101 open={this.state.drawerOpenFlg} 102 onRequestChange={(drawerOpenFlg) => this.setState({drawerOpenFlg})} 103 containerStyle={{ backgroundColor: "#212121" }} 104 zDepth={5} 105 > 106 <p style={{ width: "180px", textAlign: "center", color: "#fff" }}>Menu</p> 107 <Divider style={{ backgroundColor: "#C8C8C8", marginTop: "5px", marginBottom: "5px", height: "1px" }} /> 108 {/* <Link to="/DiaryFeed" style={{ textDecoration: "none" }}> */} 109 <MenuItem 110 style={{ color: "#fff", fontSize: "14px", textAlign: "center" }} 111 onClick={ () => this.onBtnMenuItem(appConst.COMPONENT_NAME.DIARYFEED) } 112 > 113 日報フィード 114 </MenuItem> 115 {/* </Link> 116 <Link to="/MyPage" style={{ textDecoration: "none" }}> */} 117 <MenuItem 118 style={{ color: "#fff", fontSize: "14px", textAlign: "center" }} 119 onClick={ () => this.onBtnMenuItem(appConst.COMPONENT_NAME.MYPAGE) } 120 > 121 マイページ 122 </MenuItem> 123 {/* </Link> */} 124 </Drawer> 125 </div> 126 ); 127 } 128} 129 130export default withRouter(Header);

JavaScript

1// appConst.js 2// ページ定義 3export const PAGES = { 4 LOGIN: "/Login", 5 MYPAGE: "/MyPage", 6 DIARYFEED: "/DiaryFeed", 7 ERROR: "/Error", 8}; 9 10// コンポーネント名 11export const COMPONENT_NAME = { 12 MYPAGE: "MyPage", 13 DIARYFEED: "DiaryFeed", 14};

JavaScript

1// DairyFeed.js 2import React, { Component } from 'react'; 3import { graphql } from 'react-apollo'; 4import gql from 'graphql-tag'; 5import PropTypes from 'prop-types'; 6import { VelocityTransitionGroup } from 'velocity-react'; 7 8import * as appConst from '../constans/appConst'; 9import DiaryFeedItem from './DiaryFeedItem'; 10import Loading from './Loading'; 11import DiaryFeedItemNone from './DiaryFeedItemNone'; 12 13class DiaryFeed extends Component { 14 constructor(props) { 15 super(props); 16 this.state = { 17 loadingFlg: true, 18 displayContentFlg: false, 19 }; 20 } 21 componentDidMount() { 22 setTimeout(() => { 23 this.setState({ 24 loadingFlg: false, 25 displayContentFlg: true 26 }) 27 }, 1500); 28 } 29 render() { 30 let gqlRet = ''; 31 // Graphcool接続エラー処理 32 if (this.props.data.error) { 33 console.log(this.props.data.error.message); 34 } 35 console.log(this.props); 36 return ( 37 <div style={{ paddingTop: "50px", paddingLeft: "20px", paddingRight: "20px" }}> 38 {this.state.displayContentFlg ? 39 <div> 40 {gqlRet} 41 <div style={{ paddingBottom: "50px" }}> 42 {this.props.data.allDiaryReports.length > 0 ? 43 this.props.data.allDiaryReports.map(diaryFeed => ( 44 <DiaryFeedItem key={diaryFeed.id} item={diaryFeed} userId={this.props.userId} />)) : 45 <DiaryFeedItemNone /> 46 } 47 </div> 48 </div> 49 : 50 undefined 51 } 52 </div> 53 ); 54 } 55} 56 57// 全ユーザ日報一覧取得クエリ生成 58export const ALL_DIARY_REPORTS = gql` 59 query GetAllDiaryReports { 60 allDiaryReports(orderBy: createdAt_DESC) { 61 id 62 title 63 description 64 likecount 65 author { 66 email 67 } 68 createdAt 69 comments(orderBy: createdAt_ASC) { 70 id 71 createdAt 72 commentdesc 73 author { 74 email 75 } 76 } 77 } 78 } 79`; 80 81// プロパティ宣言 82DiaryFeed.propTypes = { 83 data: PropTypes.shape({ 84 loading: PropTypes.bool, 85 error: PropTypes.object, 86 allDiaryReports: PropTypes.array 87 }).isRequired 88}; 89 90const DiaryReportFeedData = graphql(ALL_DIARY_REPORTS)(DiaryFeed); 91 92export default DiaryReportFeedData;

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しましたのでクローズします

投稿2018/12/26 13:03

seiyan0426

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問