javascript - 为什么即使使用正确的语法，useParams 也会返回 undefined？

Question

我知道这个问题已经被问了很多，但我阅读了每个问题和答案，我的问题并没有消失。

我正在尝试访问 http://localhost:3000/1 并且 useParams 应该接收 1 以从API，但我收到 undefined。

在 Component.tsx 中，我正在使用 console.log 接收 useParams 但我得到 undefined。所有相关文件都已发布，因为我正在正确使用 BrowserRouter 和其他相关的 React Router 导入。

我的代码有什么问题？为什么我没有得到正确的参数？

组件.tsx:

import { createContext, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { CharacterSchema, PageSchema } from "../interfaces/characterInterfaces";
import { IGetAllCharacters } from "../interfaces/contextInterfaces";
import { IChildren } from "../interfaces/reactInterfaces";
import api from "../services/api";

export const GetAllCharactersContext = createContext<IGetAllCharacters>({} as IGetAllCharacters);

export const GetAllCharactersInfo = ({ children }: IChildren) => {
  const [charactersList, setCharactersList] = useState<CharacterSchema[]>([]);

  let navigate = useNavigate();

  const { page } = useParams();
  console.log(page);

  useEffect(() => {
    api
      .get(`/characters?page=${page}`)
      .then((res) => {
        setCharactersList(res.data.data);
        window.localStorage.setItem("lastPage", String(page));
        return res;
      })
      .catch((err) => console.error(err));
  }, [page]);

  const nextPage = () => {
    navigate(`/2`);
  };

  const prevPage = () => {
    navigate(`/1`);
  };

  return (
    <GetAllCharactersContext.Provider value={{ charactersList, nextPage, prevPage }}>
      {children}
    </GetAllCharactersContext.Provider>
  );
};

AllRoutes.tsx:

const AllRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/1" />} />
      <Route path="/:page" element={<Home />} />
      <Route path="*" element={<Home />} />
    </Routes>
  );
};

export default AllRoutes;

索引.tsx:

    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App";
    import { BrowserRouter } from "react-router-dom";
    import Providers from "./contexts/Providers";
    
    const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
    root.render(
      <React.StrictMode>
        <BrowserRouter>
          <Providers>
            <App />
          </Providers>
        </BrowserRouter>
      </React.StrictMode>
    );

Answer 1

有了这个<Route path="/:page" element={<Home />} />会让你消费page与 useParams仅在 Home ，由 Route 呈现的组件对于这个特定的 url。

完成您想要的事情的一种方法是将获取部分移动到 Home 中.为此，将获取和更新状态的函数导出为上下文的一部分:

// ⚠️ import what's needed
export const GetAllCharactersContext = createContext<IGetAllCharacters>({} as IGetAllCharacters);
export const GetAllCharactersInfo = ({ children }: IChildren) => {
  const [charactersList, setCharactersList] = useState<CharacterSchema[]>([]);
  const navigate = useNavigate();
  
  const fetchCharactersList = useCallback((page) => {
    api
      .get(`/characters?page=${page}`)
      .then((res) => {
        setCharactersList(res.data.data);
        window.localStorage.setItem("lastPage", String(page));
      })
      .catch((err) => console.error(err));
  }, []);


  const nextPage = () => {
    navigate(`/2`);
  };

  const prevPage = () => {
    navigate(`/1`);
  };

  return (
    <GetAllCharactersContext.Provider value={{ charactersList, fetchCharactersList, nextPage, prevPage }}>
      {children}
    </GetAllCharactersContext.Provider>
  );
};

然后移动 useEffect你在 vendor 里面有Home .像这样:

// ⚠️ import what's needed
export default function Home() {
  const { fetchCharactersList, charactersList } = useContext(GetAllCharactersInfo);
  const { page } = useParams();

  useEffect(() => {
    if (!page) return;
    fetchCharactersList(page);
  }, [page]);

  // render data
  return <div></div>;
}