添加新团队后返回Dashboard页面，团队列表未自动刷新问题求助

我正在开发一款面向教练的团队管理应用，支持创建团队、追踪运动员信息。目前在实现添加新团队功能时遇到问题：点击Dashboard页面的「添加团队」按钮，打开AddTeam组件填写表单并提交后，页面会跳转回Dashboard的团队列表页面，但新创建的团队不会自动显示，必须手动刷新页面才能看到。

Dashboard页面代码 #

import { Button, Col, Container, Row } from "react-bootstrap";
import { useSelector } from "react-redux";
import { Link, useSearchParams } from "react-router-dom";
import MyTeams from "../components/dashboard/MyTeams";
import { useGetMyTeamsQuery } from "../slices/teamsApiSlice";

const DashboardScreen = () => {
  const { userInfo } = useSelector((state) => state.auth);
  const [searchParams] = useSearchParams();

  let type = searchParams.get("type");
  if (type === null) {
    type = "myTeams";
  }
  return (
    <Container>
      <h1 className="text-center">我的控制台</h1>
      <Row>
        <Col xs="12" md="3" className="d-flex flex-column gap-2">
          <Link to="/dashboard?type=myTeams">
            <Button className="profile_btn">我的俱乐部/团队</Button>
          </Link>
        </Col>
        <Col xs="12" md="9">
          {type === "myTeams" && (
            <>
              <MyTeams user={userInfo} />
            </>
          )}
        </Col>
      </Row>
    </Container>
  );
};

export default DashboardScreen;

teamsApiSlice.jsx代码 #

import { apiSlice } from "./apiSlice";
import { TEAMS_URL } from "../constants";

export const teamsApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    createTeam: builder.mutation({
      query: (team) => ({
        url: TEAMS_URL,
        method: "POST",
        body: team,
      }),
    }),
    getMyTeams: builder.query({
      query: () => ({
        url: `${TEAMS_URL}/mine`,
      }),
      keepUnusedDataFor: 5,
    }),
  }),
});

export const { useCreateTeamMutation, useGetMyTeamsQuery } = teamsApiSlice;

MyTeams.jsx代码 #

import { Link, useSearchParams } from "react-router-dom";
import { useGetMyTeamsQuery } from "../../slices/teamsApiSlice";
import FormContainer from "../FormContainer";
import Loader from "../Loader";
import { Button } from "react-bootstrap";
import AddTeam from "./AddTeam";
import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";

const MyTeams = ({ user }) => {
  const [searchParams] = useSearchParams();

  let action = searchParams.get("action");

  const { data: myTeams, isLoading } = useGetMyTeamsQuery();

  return (
    <>
      {!action ? (
        <>
          <h2>我的团队</h2>

          {isLoading ? (
            <Loader />
          ) : myTeams ? (
            myTeams.map((team) => <p key={team._id}>{team.teamName}</p>)
          ) : (
            <>
              <h3>你还没有创建任何团队</h3>
            </>
          )}
        </>
      ) : (
        <>
          <AddTeam user={user} />
        </>
      )}
      {!action && (
        <Link to="/dashboard?type=myTeams&action=addTeam">
          <Button className="basic_btn my-3">添加团队</Button>
        </Link>
      )}
    </>
  );
};

export default MyTeams;

AddTeam.jsx代码 #

import { Button, Form } from "react-bootstrap";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { useCreateTeamMutation } from "../../slices/teamsApiSlice";
import Loader from "../Loader";
import { toast } from "react-toastify";

const AddTeam = ({ user }) => {
  const [teamName, setTeamName] = useState("");
  const [address, setAddress] = useState("");
  const [address2, setAddress2] = useState("");
  const [city, setCity] = useState("");
  const [state, setState] = useState("");
  const [postalCode, setPostalCode] = useState("");
  const [country, setCountry] = useState("");

  const navigate = useNavigate();

  const [createTeam, { isLoading }] = useCreateTeamMutation();

  const submitHandler = async (e) => {
    e.preventDefault();
    try {
      const res = await createTeam({
        teamName,
        address,
        address2,
        city,
        state,
        postalCode,
        country,
      }).unwrap();
      navigate("/dashboard?type=myTeams");
    } catch (err) {
      toast.error(err?.data?.message || err.error);
    }
  };
  return (
    <div>
      <h2>创建团队</h2>
      <Form onSubmit={submitHandler}>
        <Form.Group controlId="teamName" className="py-3">
          <Form.Control
            type="text"
            placeholder="团队名称"
            onChange={(e) => setTeamName(e.target.value)}
          />
        </Form.Group>

        <Form.Group controlId="address" className="py-3">
          <Form.Control
            type="text"
            placeholder="地址"
            onChange={(e) => setAddress(e.target.value)}
          />
        </Form.Group>

        <Form.Group controlId="address2" className="py-3">
          <Form.Control
            type="text"
            placeholder="地址补充"
            onChange={(e) => setAddress2(e.target.value)}
          />
        </Form.Group>

        <Form.Group controlId="city" className="py-3">
          <Form.Control
            type="text"
            placeholder="城市"
            onChange={(e) => setCity(e.target.value)}
          />
        </Form.Group>

        <Form.Group controlId="state" className="py-3">
          <Form.Control
            type="text"
            placeholder="省份/州"
            onChange={(e) => setState(e.target.value)}
          />
        </Form.Group>

        <Form.Group controlId="postalCode" className="py-3">
          <Form.Control
            type="text"
            placeholder="邮政编码"
            onChange={(e) => setPostalCode(e.target.value)}
          />
        </Form.Group>

        <Form.Group controlId="country" className="py-3">
          <Form.Control
            type="text"
            placeholder="国家"
            onChange={(e) => setCountry(e.target.value)}
          />
        </Form.Group>
        {isLoading && <Loader />}
        <Button
          type="submit"
          variant="primary"
          className="mt-2"
          disabled={isLoading}
        >
          创建团队
        </Button>
      </Form>
    </div>
  );
};

export default AddTeam;

内容的提问来源于stack exchange，提问作者Stephen Scott Moore