React页面间传递ID问题：URL参数已传递但API中传入值为Null

Hey there! Let's figure out why that group_Id is coming up null when you call your API.

First, let's break down the possible issues and fixes:

1. Double-check the source of your group_Id in the first page #

Before anything else, make sure the item.group_Id you're passing in the Link actually has a valid value. Add a quick console log in the first component to verify:

// In your first page component, where the Link is rendered
console.log('Group ID:', item.group_Id); // Make sure this logs a valid number/string, not null/undefined

If this is null, then the problem is with your item data, not the routing. Fix that first, and the URL parameter will populate correctly.

2. Use React Router's built-in tools to get the query parameter (instead of window.location) #

Since you're using React Router, relying on window.location can be unreliable in single-page apps—sometimes the router hasn't finished updating the location by the time you try to access it. Instead, use React Router's location utilities:

If you're using a functional component (React Router v6+):

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

function GroupsDetail() {
  const location = useLocation();

  const submit = () => {
    // Parse the query parameters from the location object
    const searchParams = new URLSearchParams(location.search);
    const groupId = searchParams.get("group_Id");
    
    console.log('Group ID from params:', groupId); // This should now show the correct value
    
    // Use template literals for cleaner URL construction
    const apiUrl = `http://localhost:XXXXX/api/Group/GroupDetailsDisplay?group_Id=${groupId}`;
    // Now make your API call with apiUrl
  };

  // Rest of your component code
}

If you're using a class component (React Router v5):

You'll need to wrap your component with withRouter to access the location prop:

import { withRouter } from 'react-router-dom';
import React from 'react';

class GroupsDetail extends React.Component {
  submit = () => {
    const searchParams = new URLSearchParams(this.props.location.search);
    const groupId = searchParams.get("group_Id");
    
    console.log('Group ID from params:', groupId);
    
    const apiUrl = `http://localhost:XXXXX/api/Group/GroupDetailsDisplay?group_Id=${groupId}`;
    // Proceed with API call
  };

  render() {
    // Your component JSX
    return <div>...</div>;
  }
}

// Wrap the component to inject location prop
export default withRouter(GroupsDetail);

3. Verify your route setup #

Make sure your GroupsDetail component is being rendered by React Router, not just rendered directly like a regular component. For example, in your router config:

// In your App.js or router config file
import { Routes, Route } from 'react-router-dom';
import GroupsDetail from './GroupsDetail';

function App() {
  return (
    <Routes>
      {/* Make sure this route exists */}
      <Route path="/GroupsDetail" element={<GroupsDetail />} />
      {/* Other routes */}
    </Routes>
  );
}

If you're rendering <GroupsDetail /> without a Route, the location prop won't be available, and using window.location might not catch the correct query params.

Quick extra tip #

Using template literals (backticks `) instead of string concatenation makes your URL code cleaner and less prone to typos or missing spaces.

Let me know if any of these steps fix your issue!

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