[React] Sign out後ルート'/'に遷移したい

Question

悩み

ReactでSign Outはできるようになったのですが、
サインアウト後、ルートパスが、切り替わりません。
ReactアプリはSPAなのでFirebaseなどWebデプロイした時
ルート「'/'」以外のパスにリダイレクトするとNot Foundになってしまいます。

どうすればサインアウト後ルート「'/'」にリダイレクトできるでしょうか？

例.
https://www.ドメイン.jp/
↓
Reactのルーティング
[userページ]
https://www.ドメイン.jp/user
→ ここでサインアウト
ページはサインインに遷移するが
https://www.ドメイン.jp/userのまま

やったこと

firebase.auth().signOut()後、thenでhistory.push('/');

// ...省略
() => firebase.auth().signOut().then((history) => {
    history.push('/');
})
// ...省略

// ...省略

const SignOut = () => {

    const user = firebase.auth().currentUser;
    
    return(
        <React.Fragment>
            {user != null &&
                <div
                    className="sign-out"
                    onClick={
                        () => firebase.auth().signOut().then((history) => {
                            history.push('/');
                        })
                        .catch((error) => {
                            console.log(`ログアウト時にエラーが発生しました (${error})`);
                        })
                    }
                >
                    <SignOutStyle
                        src={ SignOutIcon }
                        alt="Sign out"
                    />
                </div>
            }
        </React.Fragment>
    );
}

export default SignOut;

// ...省略

コンソール結果

ログアウト時にエラーが発生しました (TypeError: Cannot read property 'push' of undefined)

Comments

[hoshi-takanori]

history.push を使うには withRouter が必要だと思います。
https://qiita.com/junara/items/a4a98c27dc23fd53ebb9
https://www.techscore.com/blog/2017/12/01/where_does_react-router-history_come_from/

[DaisukeMori]

withRouterにしてもサインアウト後history.push('/');は同様のエラーになりました。

ただ、以下の悩みである
「FirebaseなどWebデプロイした時ルート「'/'」以外のパスにリダイレクトするとNot Foundになってしまいます。」のこの部分は、BrowserRouterではなくHashRouterにしたらURLに「#」はつくもののWebデプロイした場合でもNot Found出ることはなくなりました。

ちなみにHashRouterに関してデメリットはないでしょうか？
VueだとhashモードではSEOに難点があると言われていますが。

Answer 1

firebase.auth().signOut()の返り値はPromise<void>のようなので、then((history)で参照しているものはundefinedになっていると思われます。
react-routerなどを使用しているのであればそのhistoryを、そうでなければwindow.historyを参照して、pushメソッドを呼び出してみるとどうでしょうか。

Comments

[DaisukeMori]

ありがとうございました！！
`signOut()`後、
`window.history.pushState(null, null, '/')`と指定したら
Not Foundになることなく無事ルートURLに遷移してくれました。