react-routerでログイン後にリダイレクトさせる

こちらの公式サイトにやり方が載っています。
https://reactrouter.com/web/example/auth-workflow

redirect時にreact-routerにstateを渡して上げることで、移行先のページで取得できるということですね。

ちなみに、stateを利用しない方法だと、urlにredirectPathみたいなクエリをつけて/loginに飛ばすやり方がありますが、URIようにエンコードしないといけなかったりと大変です。リンク先の方法を利用しましょう！

上記のリンクを念の為説明すると

function PrivateRoute({ children, ...rest }) {
  let auth = useAuth();
  return (
    <Route
      {...rest}
      render={({ location }) =>
        auth.user ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}

ここでPrivateなRouteに入ったとき、ログインしていなければログイン画面にリダイレクトされます。このrenderで渡されるlocationの中に自身のパスが入っています。

    <Route
      {...rest}
      render={({ location }) =>

これをtoでstateで指定してあげることで、

          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />

ログインページのコンポーネントでuseLocationで取得できます。

function LoginPage() {
  let history = useHistory();
  let location = useLocation();
  let auth = useAuth();

  let { from } = location.state || { from: { pathname: "/" } };
  let login = () => {
    auth.signin(() => {
      history.replace(from);
    });
  };

  return (
    <div>
      <p>You must log in to view the page at {from.pathname}</p>
      <button onClick={login}>Log in</button>
    </div>
  );
}