I am experiencing an issue with useParams in the latest version of React Router on the latest iPhone Chrome browser. The issue occurs intermittently and seems to affect the retrieval of route parameters.
Details:
- React Router Version: ^6.24.1 (react-router-dom)
- Browser: Chrome on iPhone
- React Version: 17.0.0 || ^18.2.0
Problem:
When navigating to a route that uses useParams to extract parameters, the parameters are sometimes undefined. This behavior is inconsistent and only appears to happen on the latest iPhone Chrome browser. The same code works perfectly on other browsers and devices.
Example Code:
<code>import React from 'react';
import { useParams } from 'react-router-dom';
const MyComponent = () => {
const { id } = useParams();
return (
<div>
<h1>Parameter ID: {id}</h1>
</div>
);
};
export default MyComponent;
</code>
<code>import React from 'react';
import { useParams } from 'react-router-dom';
const MyComponent = () => {
const { id } = useParams();
return (
<div>
<h1>Parameter ID: {id}</h1>
</div>
);
};
export default MyComponent;
</code>
import React from 'react';
import { useParams } from 'react-router-dom';
const MyComponent = () => {
const { id } = useParams();
return (
<div>
<h1>Parameter ID: {id}</h1>
</div>
);
};
export default MyComponent;
Steps to Reproduce:
- Set up a simple React Router setup with a route that uses
useParams. - Deploy the app and access it via the latest iPhone Chrome browser.
- Navigate to the route and observe the parameter behavior.
What I’ve Tried:
- Ensuring the route path matches the URL structure.
- Clearing the browser cache and cookies.
- Updating all related dependencies to their latest versions.
- Testing on different iPhones and other devices.
Expected Behavior:
useParams should consistently retrieve the route parameters on all devices and browsers.
Actual Behavior:
On the latest iPhone Chrome browser, useParams sometimes returns undefined for the route parameters.
Has anyone else encountered this issue or found a solution? Any insights or workarounds would be greatly appreciated.