React Router 4 で認証済みルートを実装するにはどうすればよいですか?

React Router 4 での認証ルートの管理

React Router 4 では、従来のアプローチを使用した認証ルートの直接的な実装を妨げる変更が導入されています。これに対処するために、代替ソリューションを検討してみましょう。

エラーが発生しました:

最初の実装では、 を使用しようとしました。 <ルートの子>これは React Router 4 では禁止されています。

提案されたアプローチ:

このエラーを克服するには、 を利用できます。コンポーネントをカスタム と組み合わせて使用​​します。成分。 コンポーネントは、認証された prop に基づいて条件付きでレンダリングされ、目的のルートを表示するか、ユーザーが認証されていない場合はログイン ページにリダイレクトします。

PrivateRoute コンポーネント:

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

更新されたルート:

<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />

render() メソッドでのアクションのディスパッチ:

render でのアクションのディスパッチに関する懸念( ) メソッドが有効です。潜在的な副作用やパフォーマンスの問題が発生する可能性があるため、一般的には推奨されません。代わりに、componentDidMount などのライフサイクル メソッドでアクションをディスパッチするか、Redux や Context API などの React の状態管理ツールを使用する必要があります。

以上がReact Router 4 で認証済みルートを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。