如何在Django REST API+React项目中实现登录成功后跳转至Dashboard/Overview页面

看起来你已经搞定了前后端API对接，不过在登录跳转和路由配置上踩了几个小坑，我帮你梳理并修复这些问题：

1. 重构路由核心配置（index.js） #

你的index.js目前直接固定渲染LoginPage，没有建立正确的路由匹配规则，也没用上use-eazy-auth的认证上下文。另外你提到用BrowserRouter报错，大概率是因为路由结构没搭对。

修改后的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import axios from "axios";
// core styles
import "./scss/volt.scss";
import Auth from 'use-eazy-auth'
import { AuthRoute, GuestRoute } from 'use-eazy-auth/routes'
// vendor styles
import "@fortawesome/fontawesome-free/css/all.css";
import "react-datetime/css/react-datetime.css";
import HomePage from "./pages/HomePage";
import DashboardOverview from "./pages/dashboard/DashboardOverview"
import LoginPage from "./pages/examples/Signin";
import ScrollToTop from "./components/ScrollToTop";

// 配置use-eazy-auth的基础参数，适配你的Django API
const authConfig = {
  loginEndpoint: "http://localhost:8000/colorcast_app/login/",
  // 根据API返回的用户数据结构调整
  userDataResolver: (response) => response.data,
  // 假设你的API返回token字段，用来做身份校验
  tokenResolver: (response) => response.data.token,
};

ReactDOM.render(
  <BrowserRouter>
    <ScrollToTop />
    {/* 用Auth包裹路由，统一管理认证状态 */}
    <Auth {...authConfig}>
      <Switch>
        {/* 游客专属路由：未登录才能访问 */}
        <GuestRoute exact path="/examples/sign-in" component={LoginPage} />
        {/* 公开路由：所有人都能访问 */}
        <Route exact path="/" component={HomePage} />
        {/* 认证路由：只有登录后才能访问 */}
        <AuthRoute path="/dashboard/overview" component={DashboardOverview} />
      </Switch>
    </Auth>
  </BrowserRouter>,
  document.getElementById("root")
);

2. 修复登录组件的跳转逻辑（Signin.js） #

你之前把history.push注释掉了，而且表单提交时没阻止默认刷新行为，这会导致页面刷新后丢失登录状态。另外结合use-eazy-auth的API来处理登录会更规范。

修改后的Signin.js关键部分：

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faEnvelope, faUnlockAlt } from "@fortawesome/free-solid-svg-icons";
import { Col, Row, Form, Card, Button, Container, InputGroup } from '@themesberg/react-bootstrap';
import { Link, useHistory } from 'react-router-dom';
import { useAuthActions } from 'use-eazy-auth'
import { Routes } from "../../routes";
import BgImage from "../../assets/img/illustrations/signin.svg";
import axios from "axios";

export default () => {
  let history = useHistory();
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const { login } = useAuthActions(); // 用use-eazy-auth的内置登录方法

  const handleLogin = async (e) => {
    e.preventDefault(); // 阻止表单默认提交导致的页面刷新
    try {
      let formField = new FormData()
      formField.append('username', username)
      formField.append('password', password)
      
      // 调用登录API，use-eazy-auth会自动处理用户状态存储
      await login(formField);
      // 登录成功后跳转到Dashboard
      history.push(Routes.DashboardOverview.path);
    } catch (error) {
      console.error("登录失败:", error.response?.data || error.message);
      // 这里可以添加弹窗提示用户登录失败的原因
    }
  }

  return (
    <main>
      <section className="d-flex align-items-center my-5 mt-lg-6 mb-lg-5">
        <Container>
          <p className="text-center">
            <Card.Link as={Link} to={Routes.DashboardOverview.path} className="text-gray-700">
              <FontAwesomeIcon icon={faAngleLeft} className="me-2" />
              Back to homepage
            </Card.Link>
          </p>
          <Row className="justify-content-center form-bg-image" style={{ backgroundImage: `url(${BgImage})` }}>
            <Col xs={12} className="d-flex align-items-center justify-content-center">
              <div className="bg-white shadow-soft border rounded border-light p-4 p-lg-5 w-100 fmxw-500">
                <div className="text-center text-md-center mb-4 mt-md-0">
                  <h3 className="mb-0">Sign in to our platform</h3>
                </div>
                {/* 绑定自定义的登录处理函数 */}
                <Form className="mt-4" onSubmit={handleLogin}>
                  <Form.Group id="username" className="mb-4">
                    <Form.Label>Your Username</Form.Label>
                    <InputGroup>
                      <InputGroup.Text>
                        <FontAwesomeIcon icon={faEnvelope} />
                      </InputGroup.Text>
                      <Form.Control 
                        autoFocus 
                        required 
                        type="text" // 修正input类型为text，没有username类型
                        value={username} 
                        onChange={(e) => setUsername(e.target.value)} 
                        placeholder="example" 
                      />
                    </InputGroup>
                  </Form.Group>
                  <Form.Group id="password" className="mb-4">
                    <Form.Label>Your Password</Form.Label>
                    <InputGroup>
                      <InputGroup.Text>
                        <FontAwesomeIcon icon={faUnlockAlt} />
                      </InputGroup.Text>
                      <Form.Control 
                        required 
                        type="password" 
                        value={password} 
                        onChange={(e) => setPassword(e.target.value)} 
                        placeholder="Password" 
                      />
                    </InputGroup>
                  </Form.Group>
                  <div className="d-flex justify-content-between align-items-center mb-4">
                    <Card.Link className="small text-end">Lost password?</Card.Link>
                  </div>
                  <Button variant="primary" type="submit" className="w-100">
                    Sign in
                  </Button>
                </Form>
                <div className="d-flex justify-content-center align-items-center mt-4">
                  <span className="fw-normal">
                    Not registered?
                    <Card.Link as={Link} to={Routes.Signup.path} className="fw-bold">
                      {` Create account `}
                    </Card.Link>
                  </span>
                </div>
              </div>
            </Col>
          </Row>
        </Container>
      </section>
    </main>
  );
};

3. 清理冗余代码 #

你的App组件目前没有被使用，里面的Todo相关逻辑和当前登录路由无关，可以暂时注释或删除，避免代码混淆。

关键问题复盘 #

• 路由结构缺失：没有用Switch建立路径匹配规则，直接渲染单一组件
• 表单提交未阻止默认行为：页面刷新导致登录状态丢失
• 跳转逻辑被注释：登录成功后没有执行页面跳转
• 认证上下文未初始化：没有用Auth Provider包裹路由，无法管理用户登录状态

按照以上步骤修改后，应该就能实现登录成功后自动跳转到/dashboard/overview的需求了。

内容的提问来源于stack exchange，提问作者Karan Chaudhari