You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

区块链电子投票系统Signup页面空白问题求助

avatar
云原生阿岚
2026-7-24
问题描述

我正在开发基于区块链的电子投票系统作为毕业设计，登录页面点击“Sign up”按钮后能跳转至Signup页面，但该页面仅显示空白白屏，无任何内容，尝试多种解决方案无效，请求帮忙定位问题。

相关代码文件

Login.jsx 

import { useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import './styles.css';

const Login = () => {
    const [data, setData] = useState({ voter_id: "", password: "" });
    const [error, setError] = useState("");

    const handleChange = ({ currentTarget: input }) => {
        setData({ ...data, [input.name]: input.value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const url = "http://localhost:5000/api/signin";
            const { data: res } = await axios.post(url, data);
            localStorage.setItem("access_token", res.data);
            window.location = "/";
        } catch (error) {
            if (
                error.response &&
                error.response.status >= 400 &&
                error.response.status <= 500
            ) {
                setError(error.response.data.message);
            }
        }
    };

    return (
        <div className={'login_container'}>
            <div className="login_form_container">
                <div className="left">
                    <form className="form_container" onSubmit={handleSubmit}>
                        <h1>Log in</h1>
                        <input
                            type="voter_id"
                            placeholder="Voter_id"
                            name="voter_id"
                            onChange={handleChange}
                            value={data.voter_id}
                            required
                            className="input"
                        />
                        <input
                            type="password"
                            placeholder="Password"
                            name="password"
                            onChange={handleChange}
                            value={data.password}
                            required
                            className="input"
                        />
                        {error && <div className="error_msg">{error}</div>}
                        <Link to="/">
                        <button type="submit" className="green_btn">
                            Sign In
                        </button>
                        </Link>
                    </form>
                </div>
                <div className="right">
                    <h1>New Here ?</h1>
                        <button type="button" className="white_btn">
                    <Link to="/Signup">
                        Sign Up
                    </Link>
                    </button>
                </div>
            </div>
        </div>
    );
};

export default Login;

Signup.jsx 

import { useState } from "react";
import axios from "axios";
import { Link, Redirect } from "react-router-dom";
import './styles.css'

const Signup = () => {
    const [data, setData] = useState({
        firstName: "",
        lastName: "",
        email: "",
        password: "",
    });
    const [error, setError] = useState("");
    const navigate = Redirect();

    const handleChange = ({ currentTarget: input }) => {
        setData({ ...data, [input.name]: input.value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const url = "http://localhost:5000/api/signup";
            const { data: res } = await axios.post(url, data);
            navigate("/login");
            console.log(res.message);
        } catch (error) {
            if (
                error.response &&
                error.response.status >= 400 &&
                error.response.status <= 500
            ) {
                setError(error.response.data.message);
            }
        }
    };

    return (
        <div className="signup_container">
            <div className="signup_form_container">
                <div className="left">
                    <h1>Welcome Back</h1>
                    <Link to="/login">
                        <button type="button" className="white_btn">
                            Sign in
                        </button>
                    </Link>
                </div>
                <div className="right">
                    <form className="form_container" onSubmit={handleSubmit}>
                        <h1>Create Account</h1>
                        <input
                            type="text"
                            placeholder="voter_id"
                            name="voter_id"
                            onChange={handleChange}
                            value={data.voter_id}
                            required
                            className="input"
                        />
                        <input
                            type="password"
                            placeholder="password"
                            name="password"
                            onChange={handleChange}
                            value={data.password}
                            required
                            className="input"
                        />
                        
                        <input
                            type="password"
                            placeholder="password_confirmation"
                            name="password_confirmation"
                            onChange={handleChange}
                            value={data.password_confirmation}
                            required
                            className="input"
                        />
                        {error && <div className="error_msg">{error}</div>}
                        <button type="submit" className="green_btn">
                            Sign Up
                        </button>
                    </form>
                </div>
            </div>
        </div>
    );
};

export default Signup;

index.js 

import React from "react";
import ReactDOM from "react-dom/client";

import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/scss/light-bootstrap-dashboard-react.scss?v=2.0.0";
import "./assets/css/demo.css";
import "@fortawesome/fontawesome-free/css/all.min.css";

import Login from "views/Login/Login";
import AdminLayout from "layouts/Admin.js";
import Signup from "./views/Signup/Signup";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <Switch>
      <Route path="/login" component={Login} />
       <Route path="/signup" exact element={<Signup/>} />
       <Route path="/admin" render={(props) => <AdminLayout {...props} />} />
       <Redirect from="/" to="/admin/Voting_List" />
      <Route path="/" component={Login} />
    </Switch>
  </BrowserRouter>
);

页面截图

登录页面截图
注册页面空白截图

问题定位与修复方案

1. 路由相关问题

  • 路径大小写不匹配：Login页面的Link指向/Signup（首字母大写），但index.js中路由定义的是/signup（小写），导致路由无法正确匹配组件。
  • React Router版本语法混用：index.js同时使用了v5的Switch、component/render属性和v6的element属性，语法冲突导致路由渲染异常。

2. Signup组件核心错误

  • 错误使用Redirect组件：const navigate = Redirect();是完全错误的用法，Redirect是React组件，不是导航函数，这会直接抛出错误导致组件渲染失败。
  • State字段缺失：组件state中未定义voter_id和password_confirmation，但表单中绑定了这两个字段，会引发undefined报错，阻断渲染。
  • 导航方式错误：v6版本中Redirect已被useNavigate钩子替代，应使用该钩子实现页面跳转。

具体修复步骤

修复Login.jsx的路径问题

将Sign Up按钮的链接改为小写：

<button type="button" className="white_btn">
  <Link to="/signup">
    Sign Up
  </Link>
</button>

统一React Router语法（推荐升级到v6）

修改index.js为v6标准写法：

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/scss/light-bootstrap-dashboard-react.scss?v=2.0.0";
import "./assets/css/demo.css";
import "@fortawesome/fontawesome-free/css/all.min.css";

import Login from "views/Login/Login";
import AdminLayout from "layouts/Admin.js";
import Signup from "./views/Signup/Signup";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/signup" element={<Signup />} />
      <Route path="/admin/*" element={<AdminLayout />} />
      <Route path="/" element={<Navigate to="/admin/Voting_List" />} />
    </Routes>
  </BrowserRouter>
);

修复Signup.jsx的所有错误

import { useState } from "react";
import axios from "axios";
import { Link, useNavigate } from "react-router-dom";
import './styles.css'

const Signup = () => {
    // 补充缺失的state字段
    const [data, setData] = useState({
        firstName: "",
        lastName: "",
        email: "",
        voter_id: "",
        password: "",
        password_confirmation: ""
    });
    const [error, setError] = useState("");
    // 使用useNavigate钩子实现导航
    const navigate = useNavigate();

    const handleChange = ({ currentTarget: input }) => {
        setData({ ...data, [input.name]: input.value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const url = "http://localhost:5000/api/signup";
            const { data: res } = await axios.post(url, data);
            navigate("/login");
            console.log(res.message);
        } catch (error) {
            if (
                error.response &&
                error.response.status >= 400 &&
                error.response.status <= 500
            ) {
                setError(error.response.data.message);
            }
        }
    };

    return (
        <div className="signup_container">
            <div className="signup_form_container">
                <div className="left">
                    <h1>Welcome Back</h1>
                    <Link to="/login">
                        <button type="button" className="white_btn">
                            Sign in
                        </button>
                    </Link>
                </div>
                <div className="right">
                    <form className="form_container" onSubmit={handleSubmit}>
                        <h1>Create Account</h1>
                        <input
                            type="text"
                            placeholder="voter_id"
                            name="voter_id"
                            onChange={handleChange}
                            value={data.voter_id}
                            required
                            className="input"
                        />
                        <input
                            type="password"
                            placeholder="password"
                            name="password"
                            onChange={handleChange}
                            value={data.password}
                            required
                            className="input"
                        />
                        
                        <input
                            type="password"
                            placeholder="password_confirmation"
                            name="password_confirmation"
                            onChange={handleChange}
                            value={data.password_confirmation}
                            required
                            className="input"
                        />
                        {error && <div className="error_msg">{error}</div>}
                        <button type="submit" className="green_btn">
                            Sign Up
                        </button>
                    </form>
                </div>
            </div>
        </div>
    );
};

export default Signup;

额外排查建议

  • 打开浏览器开发者工具（F12），查看控制台是否有其他报错信息，帮助定位剩余问题。
  • 确认Signup组件的styles.css文件路径正确，确保样式能正常加载。

内容的提问来源于stack exchange，提问作者MR_DEVLOPER 01

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.24 15:27:00