react-routerを使っていてgoogle認証を伴う場合どのようにリダイレクトを行えばいいのか

Question

create-react-appを用いてSPAのフロントエンドを構築しております。
なおgoogle認証が必要なため以下のようにgoogle認証用に/login等をproxy接続しています

• package.json

"proxy": {
        "/swagger.json": {
            "target": "http://localhost:8082"
        },
        "/swaggerui/*": {
            "target": "http://localhost:8082"
        },
        "/api/*": {
            "target": "http://localhost:8082"
        },
        "/login": {
            "target": "http://localhost:8082"
        },
        "/oauth2callback": {
            "target": "http://localhost:8082"
        }
    }

react-router-domのLinkタグを用いて/loginに遷移すればproxy先に接続するかと思ったのですが
上手く行きませんでした。react-routerはSPAの中でしか遷移は行わないというのはなんとなく想像できたので、
SPA内の/loginpath用にComponentを作成しました

• containers/login.tsx

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface Params {
    nextUrl: string;
}
export interface LoginProps extends RouteComponentProps<Params> {
}

class Login extends React.Component<LoginProps, {}> {
    componentDidMount() {
        location.href = `/login?next_url=${this.props.match.params.nextUrl}`;
        location.reload(true);
    }
    render() {
        return null;
    }
}

export default Login;

上記next_urlは遷移後にもとのurlに戻りたいので設定しています。

ですがやはりSPA内にとどまってしまいます。(手動でreloadすると遷移が動きます。)
本来どのように書くのが正解なのか教えてください。

Answer 1

そもそも勘違いだったようです。
react-devtoolで各ルートのmath propsを参照してみると
/login path の Route のmath propsが常にnullでした。
したがってそもそもLogin Componentのレンダリングがされていませんでした。
Link側のtoに設定するpathがダメだったようです。
修正してLogin componetのレンダリングに到達するときちんとリダイレクトを行いました。