react axios登录

首先，你需要安装 axios 和 react-router-dom 两个库。

在你的登录页面组件中，你可以创建一个函数来处理提交表单的逻辑，如下所示：

import axios from 'axios';
import { useHistory } from 'react-router-dom';

function Login() {
  const history = useHistory();

  const handleSubmit = async (event) => {
    event.preventDefault();
    const { email, password } = event.target.elements;

    try {
      const response = await axios.post('/api/auth/login', {
        email: email.value,
        password: password.value,
      });

      // 如果登录成功，将 token 存储在本地存储中
      localStorage.setItem('token', response.data.token);

      // 跳转到主页
      history.push('/');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input type="email" name="email" />
      </label>
      <label>
        Password:
        <input type="password" name="password" />
      </label>
      <button type="submit">Login</button>
    </form>
  );
}

export default Login;

在上面的代码中，我们使用了 `axios.post()` 方法来与后端 API 进行通信。在成功登录后，我们将从响应中获取的 token 存储在 localStorage 中，并使用 `history.push()` 方法将用户重定向到主页。

请注意，在上面的代码中，我们使用了 `useHistory()` 钩子来获取 `history` 对象。这个钩子可以在 React Router v5 中使用，它允许我们在组件中进行编程式导航。

当然，这只是一个简单的示例，你需要根据你的应用程序的需要来修改这个代码。