reactjs - 在 react router v6 中重定向之前，组件会短暂显示

Question

我有一个我无法解决的小问题。在我的 React 应用程序中，我使用 react-router v6，我必须遵循以下路线:

    <Route path="/" element={<App />} />
    <Route path=":id" element={<CharacterDetails/>} />
    <Route path="*" element={<Navigate replace to="/" />} />

如您所见，我有一条需要 id 的路线。只要我提供现有 Id 以便 CharacterDetails 组件成功获取一些数据，这就可以正常工作。但是，如果我在 URL 中传递一些随机文本，例如 "localhost:3000/randomText"，CharacterDetails 组件仍会显示一小段时间，直到useEffect 触发以确定请求是 404，并且仅在此之后它才将我重定向到 App 组件。

如何在呈现组件之前检查提供的 URL 是否确实应该返回一些数据？并在不是有效 URL 时直接重定向到 App 组件(没有 CharacterDetails 组件的闪烁)

谢谢!

编辑:我不确定这是路由器问题还是应该在组件级别进行，我正在等待建议

EDIT2:组件代码

const CharacterDetails = () => {
  const { id } = useParams<string>();
  const navigate = useNavigate();
  const [state, dispatch] = useReducer(characterReducer, initialState);
  const { data, episodes, loading } = state;

  useEffect(() => {
    const fetchData = async (id: string) => {
      dispatch({ type: "LOADING_START" })
      try {
        let response = await getSingleCharacterData(id);
        let URLs = response.data.episode;
        let listOfEpisodes = await getEpisodeName(URLs);
        dispatch({
          type: "FETCH_SUCCESS",
          payload: { data: response.data, episodeList: listOfEpisodes },
        });
        dispatch({ type: "LOADING_OVER" })
      } catch (error) {
        dispatch({ type: "LOADING_OVER" })
        navigate("/");
      }
    };

    if (id) fetchData(id);
  }, [id, navigate]);

  return ( 
    <CharacterDetailsContainer>
    {loading ? <Loading /> :
      data && ( 
         <div> </div> 
    )}
    </CharacterDetailsContainer>
}

Answer 1

您可以使用 useParams钩住 child 。

const acceptableIDs = ["dog", "cat"];
function CharacterDetails() {
  let { id } = useParams();
  return acceptableIDs.includes(id) ? (
    <div>
      <h3>ID: {id}</h3>
    </div>
  ) : null; // render nothing or redirect
}

如果检查 ID 是否有效花费的时间太长，您可以显示一个转换。

请注意，这是业务逻辑，不应该渗透到路由器中。