React+Java(JPA)登录后无法在Dashboard展示用户数据求助

使用React作为前端框架、Java（JPA）作为后端接口实现用户登录验证，预期输入正确登录信息后跳转至Dashboard页面并展示用户数据，但目前未达到预期效果，登录成功后出现Cannot destructure property 'user' of 'props.location.state' as it is undefined错误。

相关代码 #

1. Login组件代码 #

const Login = () => {
  const [loginData, setLoginData] = useState({
    email: " ",
    password: " ",
  });

  useEffect(() => {
    document.getElementById("passwordInput").value = "";
  }, []);
  const [notification, setNotification] = useState("");
  const [userState, setUser] = useState(null);

  const history = useNavigate();
  const location = useLocation();
  const { state } = location;
  const { user } = state || {};

  const handleChange = (e) => {
    setLoginData({
      ...loginData,
      [e.target.name]: e.target.value,
    });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    axios
      .post("http://localhost:8080/api/login", loginData)
      .then((response) => {
        console.log(response.data);
        setUser(response.data);
        history("/Student-Form/dashboard", { state: { user: response.data } });
      })
      .catch((error) => {
        if (error.response) {
          setNotification(
            "Login failed with status code:" + error.response.status
          );

          if (error.response.status === 401) {
            setNotification("Invalid Password or User Not Found");
          } else {
            // ehllo
          }
        } else if (error.request) {
          setNotification("No response received");
        } else {
          setNotification("Error setting up the request:", error.message);
        }
      });
  };

  return (
    <div>
      <div>{notification}</div>
      <NavLink
        type="button"
        to="/Student-Form/all-students"
      >
        All
      </NavLink>
      <form
        onSubmit={handleSubmit}
      >
        <div className="mb-4">
          <input
            type="email"
            name="email"
            value={loginData.email}
            onChange={handleChange}
            placeholder="email"
          />
        </div>
        <div className="mb-6">
          <input
            type="password"
            name="password"
            value={loginData.password}
            onChange={handleChange}
            placeholder="password"
            id="passwordInput"
          />
        </div>
        <div>
          <button
            type="submit"
          >
            Submit
          </button>
          {user && <DashBoard user={user} />}
          <NavLink
            type="button"
            to="/Student-Form/registration"
          >
            Regitration
          </NavLink>
        </div>
      </form>
    </div>
  );
};

export default Login;

2. Dashboard组件代码 #

const DashBoard = (props) => {
  if (!props.location) {
    return <div>Loading...</div>;
  }
  const { user } = props.location.state;
  console.log("Received user prop:", user);

  console.log("Received user prop:", user);

  if (!user) {
    console.error("Invalid or incomplete user information:", user);
    return <div>Error: Invalid or incomplete user information</div>;
  }
  const { id, studentName, fatherName } = user;

  return (
    <div >
      <div >
        <div>
          <img
            src=""
            alt="Profile Picture" />
          <p className="text-gray-500">Id: {id}</p>
          <h1 >Student Name: {studentName}</h1>
          <p>Father Name: {fatherName}</p>
        </div>

        <div>
          <h2>User Information</h2>
        </div>
        <div className="mt-6">
          <h2>Change Password</h2>
          {/* ... */}
        </div>
      </div>
    </div>
  );
};

3. 路由配置 #

App.js代码

import { NavLink, Outlet } from "react-router-dom";

export default function App() {
  return (
    <div>
      <h1 className="text-3xl font-bold underline">Hello world!</h1>
      <Outlet />
      <NavLink to="/Student-Form">Login</NavLink> <br />
      <NavLink to="/Student-Form/registration">Regitration</NavLink> <br />
      <NavLink to="/Student-Form/all-students">Student List</NavLink> <br />
      <NavLink to="/Student-Form/dashboard">Dashboard</NavLink>
    </div>
  );
}

main.js代码

const router = createBrowserRouter([
      {
        path: "Student-Form",
        element: <App />,
        children: [
          {
            path: "/Student-Form/",
            element: <Login />,
          },
          {
            path: "/Student-Form/registration",
            element: <StudentRegistration />,
          },
          {
            path: "/Student-Form/all-students",
            element: <StudentList />,
          },
          {
            path: "/Student-Form/dashboard",
            element: <DashBoard />,
          },
        ],
      },
    ]);
    
    ReactDOM.createRoot(document.getElementById("root")).render(
      <RouterProvider router={router} />
    );

问题原因及修复方案 #

1. Dashboard组件获取路由状态方式错误 #

react-router-dom v6中，组件不再通过props接收location对象，需使用useLocation钩子获取路由状态。

修复后的Dashboard组件：

import { useLocation } from 'react-router-dom';

const DashBoard = () => {
  const location = useLocation();
  
  // 处理state可能不存在的边界情况
  if (!location.state?.user) {
    console.error("用户信息未传入");
    return <div>错误：无法获取用户信息，请先登录</div>;
  }

  const { id, studentName, fatherName } = location.state.user;

  return (
    <div>
      <div>
        <div>
          <img src="" alt="Profile Picture" />
          <p className="text-gray-500">Id: {id}</p>
          <h1>Student Name: {studentName}</h1>
          <p>Father Name: {fatherName}</p>
        </div>

        <div>
          <h2>User Information</h2>
        </div>
        <div className="mt-6">
          <h2>Change Password</h2>
          {/* ... */}
        </div>
      </div>
    </div>
  );
};

export default DashBoard;

2. Login组件冗余代码 #

Login组件中{user && <DashBoard user={user} />}属于冗余渲染，已通过navigate跳转至Dashboard路由，无需在此处渲染。同时修正loginData初始值的空格，避免干扰接口请求。

修复后的Login组件核心修改：

// 修正初始值，去掉不必要的空格
const [loginData, setLoginData] = useState({
  email: "",
  password: "",
});

// 移除渲染代码
<div>
  <button type="submit">Submit</button>
  {/* 移除此处的<DashBoard /> */}
  <NavLink type="button" to="/Student-Form/registration">Regitration</NavLink>
</div>

3. 路由路径配置不一致 #

主路由path为Student-Form，子路由应使用相对路径，避免重复前缀导致路由匹配异常。

修复后的main.js路由配置：

const router = createBrowserRouter([
  {
    path: "Student-Form",
    element: <App />,
    children: [
      {
        path: "", // 相对路径，匹配/Student-Form/
        element: <Login />,
      },
      {
        path: "registration", // 相对路径，匹配/Student-Form/registration
        element: <StudentRegistration />,
      },
      {
        path: "all-students", // 相对路径，匹配/Student-Form/all-students
        element: <StudentList />,
      },
      {
        path: "dashboard", // 相对路径，匹配/Student-Form/dashboard
        element: <DashBoard />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

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