传递路由参数后页面重新加载时，React 会做什么？

Question

我使用的技术栈是React+TS+React-Router-V6 现在点击按钮后页面会传递参数，页面可以实时变化并接收传递的参数（如下图）。

enter image description here

但我希望能达到下图一样的效果，点击后页面会重新渲染。我用useEffect捕获id参数，但是没有效果，应该怎么做才能达到下图一样的效果

我的路由参数的参数是id。路由定义如下。

const routes: RouteObject[] = [
  { path: "/", element: <Navigate to="/discover" /> },
  {
    path: "/discover",
    element: <Discover />,
    children: [
      { path: "/discover", element: <Navigate to="/discover/recommend" /> },
      { path: "/discover/recommend", element: <Recommend /> },
      { path: "/discover/ranking", element: <Ranking /> },
      { path: "/discover/singers", element: <Singers /> },
      { path: "/discover/songs", element: <Songs /> },
      { path: "/discover/album", element: <Album /> },
      {
        path: "/discover/djradio",
        element: <DJRadio />,
        children: [
          { path: "/discover/djradio/category", element: <Category /> },
        ],
      },
    ],
  },
  { path: "/mine", element: <Mine /> },
  { path: "/focus", element: <Focus /> },
  { path: "/download", element: <Download /> },
];
export default routes;

enter image description here

这是我的组件的代码

import { Carousel } from "antd";
import React, { ReactNode, useEffect, useRef, memo, ElementRef } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { getRadioDataAction } from "./store";
import { useBearDispatch, useBearSelector } from "@/store";
import { RadioWrapper } from "./style";
import { RadioItemWrapper } from "./style";
import classNames from "classnames";
import { useQuery } from "@/utils/useQuery";
interface IProps {
  children?: ReactNode;
}

const DJRadio: React.FC<IProps> = () => {
  const dispatch = useBearDispatch();
  const ref = useRef<ElementRef<typeof Carousel>>(null);
  const navigate = useNavigate();
  const { id } = useQuery();
  const currentID = id;
  const { catelist } = useBearSelector((state) => ({
    catelist: state.radio.catelist,
  }));
  useEffect(() => {
    dispatch(getRadioDataAction());
  }, [id]);
  function handleChange(isNext: boolean) {
    if (isNext) {
      ref.current?.next();
    } else {
      ref.current?.prev();
    }
  }
  function handleClickTo(id: number) {
    const wantUrl = "/discover/djradio/category?id=" + id;
    navigate(wantUrl);
  }
  return (
    <RadioWrapper className="all-bg">
      <div className="wrap-v2 content">
        <div className="content-top">
          <div
            className="my-left sprite-dj-btn"
            onClick={() => {
              handleChange(false);
            }}
          ></div>
          <Carousel className="carousel" ref={ref}>
            {[0, 1].map((item: any, index: number) => {
              return (
                <div className="dj-content" key={index}>
                  {catelist &&
                    catelist
                      .slice(index * 18, (index + 1) * 18)
                      .map((element: any) => {
                        return (
                          <RadioItemWrapper
                            key={element.id}
                            imgUrl={element.picWebUrl}
                            onClick={() => handleClickTo(element.id)}
                            className={classNames({
                              active: currentID == element.id,
                            })}
                          >
                            <div className="img-content">
                              <div className="item-img"></div>
                            </div>

                            <span className="item-name">{element.name}</span>
                          </RadioItemWrapper>
                        );
                      })}
                </div>
              );
            })}
          </Carousel>
          <div
            className="my-right sprite-dj-btn"
            onClick={() => {
              handleChange(true);
            }}
          ></div>
        </div>
        <div>{id}</div>
        <Outlet></Outlet>
      </div>
    </RadioWrapper>
  );
};
export default memo(DJRadio);

传递路由参数后页面重新加载

Answer 1

我只想要一个重载效果。 useEffect 在使用时不会重新渲染。

useEffect 作为组件渲染的结果运行；它本身不会导致任何重新呈现或页面重新加载。

“重新加载”"/discover/djradio/category" 页面的一个简单解决方案是当 id queryString 参数值更改时，从 Category 中的 useEffect 挂钩调用 window.location.reload。

例子：

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

const Category = () => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get("id");

  React.useEffect(() => {
    window.location.reload();
  }, [id]);

  ...
};

这实际上会向服务器发出页面/反应应用程序的网络请求，可能并不理想。您可以使用某些状态伪造重新加载，该状态只是有条件地呈现 null 一秒钟或到然后切换回 Category UI JSX。

例子：

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

const Category = () => {
  const [searchParams] = useSearchParams();
  const [loading, setLoading] = React.useState(true);

  const id = searchParams.get("id");

  React.useEffect(() => {
    setLoading(true);

    const timer = setTimeout(() => {
      setLoading(false);
    }, 3000);

    return () => {
      clearTimeout(timer);
    };
  }, [id]);

  ...

  if (loading) {
    return null; // or loading indicator/spinner/etc...
  }

  ...
};