UseParams 给出未定义且不从 url 获取

Question

我正在尝试从 useParams 获取文件夹 ID，但它未定义。 这是我的应用组件

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

function App() {
  const [isLogin , setIsLogin] = useState(true);
  // const ctx = useContext(UserContext)
  // const isLogin = ctx.isLogin;
  const user = useAuthState(auth);
  // const userId = user?.[0].uid;
  const userDetails = auth.currentUser;

  useEffect(() => {
    if (userDetails?.uid === null ) {
      setIsLogin(false);
    }
  } , [userDetails ])

  const { folderId } = useParams()
  console.log(folderId)

  return (
    <DndProvider backend={HTML5Backend}>
      <NavBar user = {user} onLogout={(props) => {setIsLogin(props)}} isLogin={isLogin} />
      <p>Id is {folderId}</p>
      <Routes>
      <Route path="/:folderId" exact element = {<ShowNotes userId = {userDetails?.uid} />} />
        <Route path='/register' exact element={user && isLogin ? 
          <div>
          <FolderButton userId = {userDetails?.uid} />
          <ShowFolder userId = {userDetails?.uid}  />
        </div> : <SignInForm onLogin = {(props) => {setIsLogin(props)}} />} />
        <Route path='/' exact element={user && isLogin ? <div>
          <AddNotesButton userId = {userDetails?.uid}  />
          <FolderButton userId = {userDetails?.uid} />
          <ShowFolder userId = {userDetails?.uid}  />
        </div> : <Login onLogin = {(props) => {setIsLogin(props)}}  />} /> 
      </Routes>
    </DndProvider>
  );
}
export default App;

这是文件夹组件

mport React, { useState, useEffect } from "react";
import { db } from "../firebase";
import { collection, getDocs, docs } from "firebase/firestore";

import FolderData from "./FolderData";

function ShowFolder(props) {
  const [folders, setFolders] = useState([]);
  const folderRef = collection(db, "folders");

  useEffect(() => {
    const getData = async () => {
      const data = await getDocs(folderRef);
      const folderData = data.docs.map((doc) => {
        return { id: doc.id, data: doc.data() };
      });
      console.log(folderData);
      setFolders(folderData);
    };
    getData();
  }, []);

  return (
    <>
      {folders.map((folder) => {
        return (
          <div key={folder.id}>
            {folder.data.userId === props.userId && (
              <div>
                <div className="container w-full md:px-4 mx-auto py-2">
                  <div className="md:grid lg:grid-cols-3 md:grid-cols-2 mlg:grid-cols-3 md:gap-10 space-y-6 md:space-y-0 px-10 md:px-0 mx-auto">
                    <FolderData key={folder.id} folder={folder} />
                  </div>
                </div>
              </div>
            )}
          </div>
        );
      })}
    </>
  );
}

export default ShowFolder;

这是文件夹数据

import React from "react";
import { Link } from "react-router-dom";
import image from "../assets/folder.png";

function FolderData(props) {
  return (
    <div>
      <Link to={`/${props.folder.id}`}>
        <figure>
            <img alt="" src={image} height="150" width="90" />
          <figcaption>{props.folder.data.title}</figcaption>
        </figure>
      </Link>
    </div>
  );
}

export default FolderData;

请帮帮我。我什至尝试过使用 match.params 但这也是未定义的。如果还有其他方法可以让我从 url 获取内容，请也建议我。

Answer 1

您的const { folderId } = useParams() 需要位于由定义这些参数的Route 组件包装的组件中