React页面间传递ID至API问题：URL参数已传递但API未触发或接收到Null值

Alright, let's work through your problem step by step—you've got two main issues here: mismatched parameter handling leading to null IDs, and inconsistent API triggers. Let's fix both:

1. Fix the Parameter Retrieval Mismatch #

First, let's look at the disconnect between your link setup and how you're trying to fetch the ID:

• Your Edit link code uses a query parameter (?group_Id=), but the resulting URL you shared is http://localhost:3001/Editpage.js/29—this means your route is likely configured to use a path parameter (not a query string). That's why urll.searchParams.get("group_Id") returns null: the ID isn't in the query string, it's part of the URL path.

You have two solid options to fix this:

Option A: Stick with Query Parameters #

If you want to keep using the ?group_Id=X format, fix your Link syntax (remove the extra slash before the ?):

<Link to={`/Editpage.js?group_Id=${item.group_Id}`} title="Edit">Edit</Link>

Then, use React Router's built-in useSearchParams hook (better practice than directly accessing window.location for React apps) to fetch the parameter:

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

function Editpage() {
  const [searchParams] = useSearchParams();
  const groupId = searchParams.get("group_Id");
  
  console.log(groupId); // Now this should return the correct ID
}

Option B: Switch to Path Parameters (Recommended for RESTful Routing) #

If your route is set up for path parameters (like /Editpage.js/:group_Id), adjust your Link to match:

<Link to={`/Editpage.js/${item.group_Id}`} title="Edit">Edit</Link>

Then use React Router's useParams hook to grab the ID:

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

function Editpage() {
  // Make sure the key here matches the parameter name in your route (e.g., if route is /editpage/:groupId, use {groupId})
  const { group_Id } = useParams();
  
  console.log(group_Id); // This will pull the ID directly from the URL path
}

2. Fix API Trigger Issues #

Your API is either not firing or receiving null because you're probably calling it too early (before the parameter is loaded) or without checking if the ID exists first. Here's how to fix this with useEffect:

import { useParams, useEffect, useState } from 'react-router-dom';

function Editpage() {
  const { group_Id } = useParams(); // Or use useSearchParams if you went with option A
  const [groupData, setGroupData] = useState(null);

  useEffect(() => {
    // Don't fire the API if we don't have a valid ID
    if (!group_Id) return;

    const fetchGroupDetails = async () => {
      try {
        const url = `http://localhost:XXXXX/api/Group/EditprofileloggedUser?Group_Id=${group_Id}`;
        const response = await fetch(url);
        const data = await response.json();
        setGroupData(data);
      } catch (error) {
        console.error("Failed to fetch group data:", error);
      }
    };

    fetchGroupDetails();
  }, [group_Id]); // Re-run the effect whenever group_Id changes

  // Your component rendering logic here
}

3. Quick Additional Checks #

• Verify your React Router setup: Make sure your route matches the parameter style you're using. For path parameters, it should look like <Route path="/Editpage.js/:group_Id" element={<Editpage />}; for query parameters, it's just <Route path="/Editpage.js" element={<Editpage />}.
• Check item.group_Id before linking: Add a console.log(item.group_Id) in your first component to confirm the ID is not null/undefined before passing it to the Link.
• Drop the .js extension from routes: It's standard practice to use clean routes like /editpage instead of /Editpage.js—this can prevent unexpected routing behavior.

内容的提问来源于stack exchange，提问作者Akilagopal