react-router v4 - MatchWhenAuthorized example

Question

ここの例では、https://react-router.now.sh/auth-workflow - ログインした後も（アドレスバーなどにアドレスを入力して）「ログイン」ルートが一致します。

MatchWithAuthTestBeforeのようなものを作成する以外にも、この問題に対するより洗練された解決方法があります。これは、レンダリングするコンポーネントのペアを取ります。

Answer 1

RRv4はすべてコンポーネントに関するものなので、解決策はコンポーネント内でこれを処理することです。本質的に、ユーザがログインしている場合は、リダイレクト例に記載されている<MatchWhenAuthorized>成分の反対。

const MatchWhenUnauthorized = ({ component: Component, ...rest }) => (
    <Match {...rest} render={props => (
    !fakeAuth.isAuthenticated ? (
     <Component {...props}/> 
    ) : (
     <Redirect to={{ pathname: '/' }}/> 
    ) 
)}/> 
) 

は、これは、通常のルーティング/ビュー設定（一致/loginとlogin中で行うであろうものに類似していますユーザーが既に認証されている場合は、リダイレクトされます）。