react，react-router-dom中的页面重定向问题

Question

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import Message from "../../components/Message/Message";
import Loader from "../../components/Loader/Loader";
import { login } from "../../actions/userActions";

export default function Login({ history }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const dispatch = useDispatch();

  const userLogin = useSelector((state) => state.userLogin);
  const { loading, error, userInfo } = userLogin;

  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(login(email, password));

    if (userInfo) {
      if (userInfo.isAdmin) {
        history.push("/admin/dashboard");
      } else {
        history.push("/");
      }
    }
  };

  return (
    <div className="login-wrapper">
      <div className="container py-5">
        <div className="login-form p-5 rounded-2">
          <h2 className="pb-3 text-center">Sign In</h2>
          {error && <Message className="alert alert-danger">{error}</Message>}
          {loading && <Loader />}
          <form onSubmit={submitHandler}>
            <div className="mb-3">
              <label for="email" className="form-label">
                Email address
              </label>
              <input
                type="email"
                value={email}
                className="form-control"
                id="email"
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div class="mb-3">
              <label for="password" className="form-label">
                Password
              </label>
              <input
                type="password"
                className="form-control"
                value={password}
                id="password"
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <div className="d-grid ">
              <button className="btn  btn-submit p-2" type="submit">
                CONTINUE
              </button>
            </div>
            <div className="d-flex justify-content-between py-3">
              <p className="">
                New User?
                <Link to="/register" className="ms-1">
                  Signup
                </Link>
              </p>
              <a href="e">Forgot your password</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

成功登录后，如果用户是管理员，我想在 url 中显示 /admin/dashboard。但它仍然显示/login URL。或者用户不是我想显示主页的管理员。对于普通用户来说它工作正常。但是对于管理员 URL 没有更新。

注意：提交登录表单后，我将 userInfo 存储在本地存储中。然后我获取本地存储数据以检查用户是否为管理员。

我该如何解决这个问题？

Answer 1

您需要重定向 Login 中的回调操作。

例子：

if (userInfo) {
  if (userInfo.isAdmin) {
    history.push("/admin/dashboard");
  } else {
    history.push("/");
  }
}

在 submitHandler 之后 dispatch(login(email, password)); 他们不等待操作 complate 并且 userInfo. isAdmin 仍然不可用所以它不会重定向到 /admin/dashboard 页面。

您可以在您的操作中使用history 对象并执行此操作。

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

export const App: React.FC = () => {
  return (
      <Router history={history}>
        <Routes /> // Your all routes
      </Router>
  );
};

现在您可以在操作中使用历史记录。

import { history } from './app';

const login = () => { 
 // do API stuff
 history.push('/somewhere');

 history.push({
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
   [userDefined]: true
   }
 });
};

或者您可以在 useEffect 挂钩中收听 userInfo 并执行此操作。

       useEffect(() => {
            if (userInfo.isAdmin) {
               history.push("/admin/dashboard");
            } else {
               history.push("/");
            }
        }, [userInfo?.isAdmin]);