Description:
I have a React application with a route setup to display a public profile using parameters like /profile?id=test123 or /?profile=test123. I’ve implemented the route using useSearchParams() and useParams() hooks.

What I’ve Done:

• Created a route using useSearchParams() and useParams() hooks.
• Implemented fetching data based on the parameters provided.

Issue:

• The setup works perfectly in my local environment, and data is fetched correctly.
• However, in the production environment, it redirects to a 404 page.

Code Snippets:

// PublicProfile.jsx
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { publicprofile } from '../../../../API/APIs';
import {
  Typography,
  List,
  ListItem,
  ListItemText,
  Divider,
  Box,
} from '@mui/material';

function PublicProfile() {
  let [searchParams, setSearchParams] = useSearchParams();
  console.log(searchParams);
  const logSearchParams = () => {
    console.log(searchParams.get("id"));
  };
  logSearchParams();
  const [school, setSchool] = useState(null);
  useEffect(() => {
    const fetchSchoolData = async () => {
      try {
        const payload = {
          query: searchParams.get("id"),
        };
        const response = await publicprofile(payload);

        if (!response.ok) {
          throw new Error('Failed to fetch school data');
        }
        const data = await response.json();
        setSchool(data);
        console.log(data);
      } catch (error) {
        console.error('Error fetching school data:', error);
      }
    };

    fetchSchoolData();
  }, [searchParams.get("id")]);

  if (!school) {
    return <div>Loading...</div>;
  }

  return (
    <Box p={2} border={1} borderRadius={4}>
      <Typography variant='h2'>{school.name}</Typography>

      <Box mt={2}>
        <Typography>
          <strong>Address:</strong> {school.address}
        </Typography>
      </Box>

      <Divider variant='middle' />

      <Box mt={2}>
        <List>
          <ListItem>
            <ListItemText
              primary={<strong>Phone:</strong>}
              secondary={school.contactDetails}
            />
          </ListItem>
        </List>
      </Box>

      <Divider variant='middle' />

      <Box mt={2}>
        <Typography>
          <strong>Established Date:</strong> {school.establishedDate}
        </Typography>
      </Box>

      <Divider variant='middle' />

      <Box mt={2}>
        <Typography>
          <strong>Facilities:</strong> {school.facilities.join(', ')}
        </Typography>
      </Box>
      {/* Add more details as needed */}
    </Box>
  );
}

export default PublicProfile;

Route Structure:

// Routes.js
<Route path='/' element={<Layout />}>
  <Route path='/' element={<LandingPage />} />
  <Route path='/register' element={<Register />} />
  <Route path='/login' element={<Login />} />
  <Route path='/forgotpassword' element={<ForgetPassword />} />
  <Route path='/validateOtp' element={<OTPValidation />} />
  <Route path='/resetpassword' element={<ResetPassword />} />
  <Route path='/profile' element={<PublicProfile />} />
</Route>
<Route path='/admin/' element={<AdminLayout />}>
  <Route path='/admin/profile' element={<AdminProfile />} />
  <Route path='/admin/school' element={<SchoolInfo />} />
  <Route
    path='/admin/createclassroom'
    element={<CreateClassroomForm />}
  />
  <Route
    path='/admin/generateInviteCode'
    element={<GenerateInviteCode />}
  />
  <Route path='/admin/createNewSchool' element={<CreateSchool />} />
  <Route path='/admin/attendance' element={<ViewAttendance />} />
</Route>

Question:
I’m trying to understand why this setup works in my local environment but redirects to a 404 page in the production environment. Any insights into what might be causing this issue would be greatly appreciated. Thank you!

I’m trying to understand why this setup works in my local environment but redirects to a 404 page in the production environment. Any insights into what might be causing this issue would be greatly appreciated. Thank you!

And I expect solution for how to use query params in react on production.