[解決済み] React Router 4で認証されたルートを実装するには?
2022-04-27 06:51:35
質問
認証されたルートを実装しようとしていましたが、React Router 4ではこれが動作しないことがわかりました。
<Route exact path="/" component={Index} />
<Route path="/auth" component={UnauthenticatedWrapper}>
<Route path="/auth/login" component={LoginBotBot} />
</Route>
<Route path="/domains" component={AuthenticatedWrapper}>
<Route exact path="/domains" component={DomainsIndex} />
</Route>
というエラーが発生します。
警告 を使用するべきではありません。
<Route component>
と<Route children>
を同じルートで使用することができます。<Route children>
は無視されます。
その場合、どのように実装するのが正しいのでしょうか?
に表示されます。
react-router
(v4) のドキュメントでは、次のようなことを示唆しています。
<Router>
<div>
<AuthButton/>
<ul>
<li><Link to="/public">Public Page</Link></li>
<li><Link to="/protected">Protected Page</Link></li>
</ul>
<Route path="/public" component={Public}/>
<Route path="/login" component={Login}/>
<PrivateRoute path="/protected" component={Protected}/>
</div>
</Router>
しかし、たくさんのルートをグループ化しながら、これを実現することは可能なのでしょうか?
いろいろ調べた結果、こんなことを思いつきました。
import React, {PropTypes} from "react"
import {Route} from "react-router-dom"
export default class AuthenticatedRoute extends React.Component {
render() {
if (!this.props.isLoggedIn) {
this.props.redirectToLogin()
return null
}
return <Route {...this.props} />
}
}
AuthenticatedRoute.propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
component: PropTypes.element,
redirectToLogin: PropTypes.func.isRequired
}
でアクションをディスパッチするのは正しいのでしょうか?
render()
? それは間違っているように感じます。本当に正しいとは思えません
componentDidMount
などのフックもあります。
解決方法は?
を使いたくなりますよね。
Redirect
コンポーネントを使用します。この問題には、いくつかの異なるアプローチがあります。私が好きなのは、PrivateRouteコンポーネントを用意して、その中に
authed
props を作成し、その props に基づいてレンダリングします。
function PrivateRoute ({component: Component, authed, ...rest}) {
return (
<Route
{...rest}
render={(props) => authed === true
? <Component {...props} />
: <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
/>
)
}
では、あなたの
Route
は次のようになります。
<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />
まだ迷っている人は、こんな記事を書いたので参考にしてください。 React Router v4で保護されたルートと認証
関連
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
vueが定義するプライベートフィルタと基本的な使い方
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み] React JSXにおける...restの意味とは?