Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
23 days ago

What is the method for passing an array as a parameter in react-router-dom?

The task at hand is to find a way to pass an array as a parameter in react-router-dom without encountering issues when sharing the link. Currently, while it works when the array is typed into the search bar, sharing the link causes it to become encoded and not parse correctly. The suggested solution of splitting the array using commas also does not work. Attempts to decode the URI or use toString have also failed. The code for preventing users from going back to the previous page may also be causing issues with URL parameters. Any suggestions for a workaround or solution to the problem would be appreciated.
Answers(2)
avatar
Vogi
23 days ago
Verified Answer
You can use the location object to pass state in React Router V4. Your Link would look like this: 
<Link to={{ pathname: '/abc/results', state: { myArrayVariableName: myArrayVariable} }}/>
You can then access the state in the component that is rendered by React Router using the useLocation hook. Here's an example: 
import { useLocation } from 'react-router-dom';

function Results() {
  const location = useLocation();
  const myArrayVariable = location.state.myArrayVariableName;
  // ...
}
This way, you can pass an array as a parameter without encountering issues when sharing the link. I hope this helps!

Sources

Pass an array of objects to another component using <Link> in react[Solved]-React JS how do you pass an array as a parameter using react ...The Complete Guide to URL parameters with React RouterReact JS how do you pass an array as a parameter using react-router-domhow can i use array in routing with react-router - Stack Overflow
avatar
Tolerim
23 days ago
When passing an array as a parameter in the React Router, it will automatically be encoded in the URL. This can sometimes cause issues when trying to decode the array back to its original form. To prevent the original link from changing, you can convert the array to a string using the JSON.stringify() method before passing it as a parameter. For example, if you want to pass [a,b,c] as a parameter, you can do it this way: 
const myArrayString = JSON.stringify(myArray);
<Link to={`/${myArrayString}`}>Link to array</Link>
Then, in your component, you can decode the parameter and parse it back into an array using the following code: 
const MyComponent = () => {
  const { arrayParam } = useParams();
  const myArray = JSON.parse(decodeURIComponent(arrayParam));

  return (
    <>
      {myArray.map(item => (
        <p>{item}</p>
      ))}
    </>
  );
};
This should allow you to pass arrays as URL parameters in React Router and decode them successfully in your components. Regarding the issue with the useEffect hook preventing the use of regular URL parameters, you can try using the useLocation hook from react-router-dom instead of window.location.pathname. This will give you access to the full URL, including any query parameters, and might allow you to parse them as needed. 
const MyComponent = () => {
  const location = useLocation();

  useEffect(() => {
    window.history.pushState(null, null, location.pathname);
    window.addEventListener('popstate', onBackButtonEvent);

    return () => {
      window.removeEventListener('popstate', onBackButtonEvent);
    };
  }, [location]);

  // rest of the component code...
}
Hope this helps! Let me know if you have any other questions.
;