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

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

新規登録して質問してみよう
ただいま回答率
85.47%
Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

React.js

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

Q&A

0回答

2711閲覧

react-router-domでRedirectをしたいがうまく効かない

RyoM

総合スコア90

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

React.js

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

0グッド

0クリップ

投稿2019/10/08 12:29

前提・実現したいこと

reactでログインしているときとしていないときの画面遷移を行いたい。
stateで管理しているログイン情報を見た際にログインしていれば、ログイン画面に飛ばし
していなければ、URLを変更し画面遷移を行う
例:
ログインしている場合、
/に飛ぼうとした場合、/dashboardにURLを変更しdashboardのcomponentを表示したい
ログインしていない場合
/dashboardに飛ぼうとした場合、/にURLを変更しHomeのcomponentを表示したい

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

発生問題①
Redirectを一番上にした場合、画面表示自体が行われない

React

1export default function App() { 2 const initialInfo = useSelector(state => state.initial) 3 const classes = useStyles(); 4 return ( 5 <React.Fragment> 6 { 7 initialInfo.isConnect ? 8 <CircularProgress className={classes.progress} /> 9 : 10 <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */} 11 <Switch> 12 { 13 initialInfo.isLogin ? 14 <Route path="/" render={() => <Redirect to="/dashboard" />} /> 15 : 16 <Route path="/" component={Home}/> 17 } 18 { 19 initialInfo.isLogin ? 20 <Route path="/dashboard" component={Admin}/> 21 : 22 <Route path="/dashboard" render={() => <Redirect to="/" />} /> 23 } 24 {/*<Redirect from="/dashboard" to="/admin/dashboard"/>*/} 25 <Route exact path="/" component={Home}/> 26 <Route exact path="/dashboard" component={Admin}/> 27 <Route component={NoMatch}/> 28 </Switch> 29 </ConnectedRouter> 30 } 31 </React.Fragment> 32 ); 33}

発生問題②
<Route>componentを上に持ってきた場合、Redirectが効かない

React

1export default function App() { 2 const initialInfo = useSelector(state => state.initial) 3 const classes = useStyles(); 4 return ( 5 <React.Fragment> 6 { 7 initialInfo.isConnect ? 8 <CircularProgress className={classes.progress} /> 9 : 10 <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */} 11 <Switch> 12 <Route exact path="/" component={Home}/> 13 <Route exact path="/dashboard" component={Admin}/> 14 { 15 initialInfo.isLogin ? 16 <Route path="/" render={() => <Redirect to="/dashboard" />} /> 17 : 18 <Route path="/" component={Home}/> 19 } 20 { 21 initialInfo.isLogin ? 22 <Route path="/dashboard" component={Admin}/> 23 : 24 <Route path="/dashboard" render={() => <Redirect to="/" />} /> 25 } 26 {/*<Redirect from="/dashboard" to="/admin/dashboard"/>*/} 27 <Route component={NoMatch}/> 28 </Switch> 29 </ConnectedRouter> 30 } 31 </React.Fragment> 32 ); 33}

補足情報(FW/ツールのバージョンなど)

packagejson

1"react": "^16.10.1", 2 "react-dom": "^16.10.1", 3 "react-ga": "^2.6.0", 4 "react-markdown-loader": "^1.2.1", 5 "react-redux": "^7.1.1", 6 "react-router-dom": "^5.1.2", 7 "redux": "^4.0.4", 8 "redux-logger": "^3.0.6", 9 "redux-saga": "^1.1.1",

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問