[解決済み] React-RouterでonEnterが呼び出されない
2022-02-06 13:48:22
質問
OK、もう限界です。
その
onEnter
メソッドが動作しません。なぜでしょうか?
// Authentication "before" filter
function requireAuth(nextState, replace){
console.log("called"); // => Is not triggered at all
if (!isLoggedIn()) {
replace({
pathname: '/front'
})
}
}
// Render the app
render(
<Provider store={store}>
<Router history={history}>
<App>
<Switch>
<Route path="/front" component={Front} />
<Route path="/home" component={Home} onEnter={requireAuth} />
<Route exact path="/" component={Home} onEnter={requireAuth} />
<Route path="*" component={NoMatch} />
</Switch>
</App>
</Router>
</Provider>,
document.getElementById("lf-app")
編集する
を呼び出すと、そのメソッドが実行されます。
onEnter={requireAuth()}
しかし、それは明らかに目的から外れていますし、目的のパラメータを得ることもできません。
どのように解決するのですか?
onEnter
にはもう存在しない。
react-router-4
. を使用する必要があります。
<Route render={ ... } />
を使用すると、希望する機能を得ることができます。私は
Redirect
の例には、あなたの具体的なシナリオが書かれています。以下に、あなたのシナリオに合うように修正しました。
<Route exact path="/home" render={() => (
isLoggedIn() ? (
<Redirect to="/front"/>
) : (
<Home />
)
)}/>
関連
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み] React Router v4で履歴にプッシュする方法は?
-
[解決済み] React Router v4 - 現在のルートを取得する方法は?
-
[解決済み】オプションのパスパラメータを持つReact Router
-
[解決済み】react router v4 / v5でネストされたルート
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】別のjsファイル内でJavaScriptの関数を呼び出す
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】React-Routerの子が1つしかない。
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)
-
[解決済み】module.exports "モジュールが定義されていません"