ログイン成功時、リダイレクトさせたいが出来ない。

Question

前提・実現したいこと

バックエンドをDjango, フロントをReactで実装しています。
ログイン成功時、リダイレクトを行い、/dashboardに移りたいのですが出来ません。

発生している問題・エラーメッセージ

エラーは発生しておらず、バックエンドからは200が返ってくることを確認しています。

該当のソースコード

import React, { useContext, useState } from "react";
import {
  BoldLink,
  BoxContainer,
  FormContainer,
  Input,
  MutedLink,
  SubmitButton,
  FieldContainer,
  FieldError,
  FormError
} from "../common";
import { useFormik } from "formik";
import * as yup from  "yup";
import axios from "axios";
import { withRouter } from "react-router-dom";  // new import
import { connect } from "react-redux";          // new import
import PropTypes from "prop-types";             // new import
import { Link } from "react-router-dom";
import { Container, Button, Row, Col, Form } from "react-bootstrap";

import {setAxiosAuthToken, toastOnError} from "../../utils/Utils";
import {getCurrentUser, setToken, unsetCurrentUser} from "./LoginActions";      // new import

const validationSchema = yup.object(
  {userName: yup.string().required(),
   password: yup.string().required()}
)

const login = (userData, redirectTo) => dispatch => {
  axios
    .post("/api/v1/token/login/", userData)
    .then(response => {
      const { auth_token } = response.data;
      setAxiosAuthToken(auth_token);
      dispatch(setToken(auth_token));
      dispatch(getCurrentUser(redirectTo)); // ここでログイン成功時、リダイレクトさせたい。
    })
    .catch(error => {
      dispatch(unsetCurrentUser());
      toastOnError(error);
    });
};

// [e-mail] (test account)
const Login = (props) => {
  const [error, setError] = useState(null);

  const onSubmit = async (values) => {
    const postedData = {
      username: values.userName,
      // email: values.email,
      password: values.password
    }
    setError(null);
    console.log("valuesForLogin", postedData)
    login(values, "/dashboard") // このログイン関数が何も行ってくれない。（ここでリダイレクトさせたい。）

    const response = await axios.post("/api/v1/token/login/", postedData).catch((err) => {
      if (err && err.response) {
        setError(err.response.data.message);
      }
    }

    );
    if (response) {
      console.log("Auth success");
      console.log(response);
      const { auth_token } = response.data; // get auth_token
      setAxiosAuthToken(auth_token);
    }


  }
  const formik = useFormik({initialValues: {userName: "", password: ""}, validateOnBlur: true, onSubmit, validationSchema: validationSchema });
  return (
    <BoxContainer>
      <h1>Login</h1>
      {error && <FormError>{error ? error: ""}</FormError>}
      <FormContainer onSubmit={formik.handleSubmit}>
        <FieldContainer>
        <Input name="userName" placeholder="Username" value={formik.values.userName} onChange={formik.handleChange} onBlur={formik.handleBlur}/>
        {<FieldError>{formik.touched.userName && formik.errors.userName ? formik.errors.userName : ""}</FieldError>}
        </FieldContainer>


        <FieldContainer>
        <Input name="password" type="password" placeholder="Password" value={formik.values.password} onChange={formik.handleChange} onBlur={formik.handleBlur}/>
        {<FieldError>{formik.touched.password && formik.errors.password ? formik.errors.password : ""}</FieldError>}

        </FieldContainer>
      <MutedLink href="#">Forget your password?</MutedLink>
      <SubmitButton type="submit"
                    disabled={!formik.isValid}
      >Signin</SubmitButton>
      </FormContainer>


    </BoxContainer>
  );
}

export default Login;

getCurrentUser の部分は以下になります。

export const getCurrentUser = redirectTo => dispatch => {
  axios
    .get("/api/v1/users/me/")
    .then(response => {
      const user = {
        username: response.data.username,
        // email: response.data.email
      };
      dispatch(setCurrentUser(user, redirectTo));
    })
    .catch(error => {
      dispatch(unsetCurrentUser());
      toastOnError(error);
    });
};

export const setCurrentUser = (user, redirectTo) => dispatch => {
  localStorage.setItem("user", JSON.stringify(user));
  dispatch({
    type: SET_CURRENT_USER,
    payload: user
  });

  console.log("set user" + redirectTo);
  if (redirectTo !== "") {
    dispatch(push(redirectTo));
  }
};

試したこと

バックエンド側で200が返却されることは確認しています。

ログイン画面

Answer 1

ソース見た限りだと、

import { withRouter } from "react-router-dom"; 

でインポートしてきた withRouter 使うてないみたいやけど、これ使うて、

export default Login;

のとこのLoginにwithRouterかましたって、

export default withRouter(Login);

にしとけば、Login の props に history が生えてきまっしゃろ。そしたらLoginの中で

props.history.push('/dashboard')

としてやれば、'/dashboard' にルーティング設定してあるコンポーネントが表示されると思うで。

Comments

[izuna385]

/dashboard側で別の問題が見つかりましたが、解決できました！
ありがとうございました！